Editing an svg file - svg

I have an svg file that maps out a theater seating area. Currently it draws each seat as a circle. I would like to change this to a square.
Here is the code I have
id="path7"
title="F46"
d="m 281.9461,86.766 c -2.796,0 -5.071,-2.275 -5.071,-5.071 0,-2.796 2.275,-5.072 5.071,-5.072 2.797,0 5.072,2.276 5.072,5.072 0,2.796 -2.275,5.071 -5.072,5.071 z"
inkscape:connector-curvature="0"
fill="#CDCDCD"
stroke="#CDCDCD"
stroke-width="3" />
If anyone could help on this it would be great


you have two options:
use a library for SVG http://www.svgjs.com/
manipulate Text by specifications.
change d=m 281.9461, 86.766 c <List of Coordinates>
to d=m 281.9461, 86.766 c <top left coord>, <top right coord>, <bottom right coord>, <bottom left coord>


I replaced the code I have above with this
d="m 494.33766,216.207 h -12 v -12 h 12 z"
Some great information on the topic here which gave me the exact information I was looking for
http://my.safaribooksonline.com/book/programming/flex/9781449388195/graphics/use_path_to_draw_a_shape_with_stroke

Related

Is there a way to make a map element(country/region) fly into its correct location on the map using svg animation?

I am just starting to play around with SVG animations. is it possible to make a country follow a random path to its correct place on the map? The equivalent of puzzle pieces assembling themselves when the box is opened is the best I can think of. Is this even possible with SVG animations or will something else be required?
This is what I have right now
<svg xmlns:svg="http://www.w3.org/2000/svg" viewBox="500 180 2500 1500">
<g>
<path id="US-WA" d="m 1204.9427,925.58655 c -1.3898,1.54162 -3.5681,6.4786 -0.2995,5.99944 -2.5653,2.58922 -3.3814,8.57974 -8.3992,5.99945 -1.6219,3.81537 1.3975,1.05569 2.0998,3.29967 0.4051,1.29541 -0.1592,2.49675 -0.5999,3.59966 -0.574,1.43862 -1.0531,2.67841 -0.5999,4.19962 0.9522,3.19931 -7.9766,5.68493 -8.3992,9.89904 -0.3437,3.41803 -2.4129,5.35128 -4.7996,6.89936 -1.6428,1.06557 -3.5355,1.94896 -5.0995,2.99971 -1.0386,0.69641 -3.9323,3.80031 -5.3995,2.99974 -2.3214,-1.26485 -4.2692,-0.25119 -5.0995,2.09979 1.0922,-2.53862 0.4348,-2.72427 -1.7999,-0.89992 2.8988,-1.68447 2.8988,-2.18139 0,-1.49986 3.4375,-0.54169 5.4851,-4.00727 8.6992,-5.09951 -1.4791,0.92554 -2.2605,2.696 -2.0998,4.49958 1.1896,-1.31713 2.6821,-2.51823 4.1996,-3.59966 3.3001,-1.51067 7.1003,-7.47473 3.2997,-5.39949 1.1845,-3.59217 9.6433,-5.94207 8.3992,-9.29912 -0.7286,0.44537 -1.4265,0.73373 -2.0998,1.19988 0.5808,-0.54475 1.0436,-1.2686 1.1999,-1.79983 0.5241,-1.76484 -0.3734,-3.74478 0.6,-5.3995 -1.6785,0.33627 -2.8771,1.62713 -3.2997,3.2997 -0.03,-3.66061 -9.5411,-2.9717 -13.1988,-3.59966 -6.0712,-1.04164 -10.1546,-4.19955 -15.8985,-5.69945 -3.6011,-0.94045 -7.7344,10.52732 -7.4993,14.09865 0.4944,7.49384 -4.7149,14.61007 -6.8993,21.59794 0.5058,-0.7678 1.1629,-1.73608 1.7998,-2.39975 1.0981,1.3452 2.7199,2.51886 4.4996,2.39975 -3.8928,1.13991 -8.3028,1.07697 -8.9992,5.99945 1.7737,-0.30948 3.4305,0.0307 4.7996,1.19988 -4.3035,-1.98209 -5.6594,6.11962 -9.2991,6.89936 0.7055,-1.47317 1.2194,-2.97283 1.7998,-4.49958 -0.289,0.51433 -1.36,2.46258 -2.0998,4.19962 -0.9513,2.23333 -1.3747,4.25619 0.8994,3.89962 2.6815,-0.41969 3.9566,-1.05119 6.5994,0.29996 0.1604,0.0815 0.4166,0.19315 0.5999,0.29997 0.8697,0.50617 1.9523,1.19458 2.9997,1.49987 0.5194,-0.12589 1.4274,0.31936 1.7999,0 -0.3763,0.16368 -0.7881,0.34662 -1.1999,0.29996 3.0295,3.11021 2.4204,6.05171 1.7998,8.39921 -0.621,2.3475 -1.3217,4.091 1.1999,5.3995 2.5216,1.3085 5.1278,-0.2432 8.0992,-2.3998 2.9714,-2.1566 6.495,-4.746 10.4991,-5.0995 8.0082,-0.7071 17.5494,6.3653 27.5974,5.9994 10.0479,-0.3658 14.9111,-7.1919 30.597,-9.29907 7.843,-1.05361 20.1041,-3.77898 32.097,-4.79957 5.7862,-0.49243 11.3081,-0.53657 16.4985,0.29999 0.048,-0.37868 0.261,-0.83522 0.2994,-1.19991 0.5044,-4.62142 0.3005,-8.09921 0.3005,-8.09921 l 34.1968,-59.69438 z m -8.6991,14.69864 c -4.3838,2.4582 -7.1019,6.99959 -3.8997,11.69887 2.631,-0.41669 3.1785,-3.76633 0,-3.59966 1.4791,-1.87195 0,-4.22926 2.0998,-5.69946 1.2679,-0.88982 3.6689,-0.20029 1.7999,-2.39975 z m -14.6986,15.29853 c 1.1968,-0.62576 1.5042,-0.37032 -0.8995,2.09979 -0.8773,0.49186 -1.6983,1.11039 -2.6997,1.49987 -2.5356,0.99105 -6.2994,3.05843 -6.2994,6.29941 -0.7756,0.0354 -1.6623,-0.25208 -2.3998,-0.89991 2.8184,-2.25589 5.7052,-4.56967 8.6992,-6.59938 0.4713,-0.32138 2.4028,-1.77405 3.5996,-2.39978 z" />
<animate attributeType="XML" attributeName="x" from="600" to="1000"
dur="10s" repeatCount="indefinite" />
</g>
</svg>
Any help or pointers is greatly appreciated. Thanks

Path elements don't have an x attribute. You can do the same thing with a transform animation though.
Additionally an animate element must either be the child of the path or point to the path vi the path's id. Last I checked Chrome's accessing of elements with id values containing a - sign from SMIL was buggy so given that's what you have as an id I've made the animateTransform a child of your path.
Note that SMIL can't do random on its own, you could create something that looks like a random walk but it's going to be the same each time basically. You could create random SMIL animations via javascript.
<svg xmlns:svg="http://www.w3.org/2000/svg" viewBox="500 180 2500 1500">
<g>
<path id="US-WA" d="m 1204.9427,925.58655 c -1.3898,1.54162 -3.5681,6.4786 -0.2995,5.99944 -2.5653,2.58922 -3.3814,8.57974 -8.3992,5.99945 -1.6219,3.81537 1.3975,1.05569 2.0998,3.29967 0.4051,1.29541 -0.1592,2.49675 -0.5999,3.59966 -0.574,1.43862 -1.0531,2.67841 -0.5999,4.19962 0.9522,3.19931 -7.9766,5.68493 -8.3992,9.89904 -0.3437,3.41803 -2.4129,5.35128 -4.7996,6.89936 -1.6428,1.06557 -3.5355,1.94896 -5.0995,2.99971 -1.0386,0.69641 -3.9323,3.80031 -5.3995,2.99974 -2.3214,-1.26485 -4.2692,-0.25119 -5.0995,2.09979 1.0922,-2.53862 0.4348,-2.72427 -1.7999,-0.89992 2.8988,-1.68447 2.8988,-2.18139 0,-1.49986 3.4375,-0.54169 5.4851,-4.00727 8.6992,-5.09951 -1.4791,0.92554 -2.2605,2.696 -2.0998,4.49958 1.1896,-1.31713 2.6821,-2.51823 4.1996,-3.59966 3.3001,-1.51067 7.1003,-7.47473 3.2997,-5.39949 1.1845,-3.59217 9.6433,-5.94207 8.3992,-9.29912 -0.7286,0.44537 -1.4265,0.73373 -2.0998,1.19988 0.5808,-0.54475 1.0436,-1.2686 1.1999,-1.79983 0.5241,-1.76484 -0.3734,-3.74478 0.6,-5.3995 -1.6785,0.33627 -2.8771,1.62713 -3.2997,3.2997 -0.03,-3.66061 -9.5411,-2.9717 -13.1988,-3.59966 -6.0712,-1.04164 -10.1546,-4.19955 -15.8985,-5.69945 -3.6011,-0.94045 -7.7344,10.52732 -7.4993,14.09865 0.4944,7.49384 -4.7149,14.61007 -6.8993,21.59794 0.5058,-0.7678 1.1629,-1.73608 1.7998,-2.39975 1.0981,1.3452 2.7199,2.51886 4.4996,2.39975 -3.8928,1.13991 -8.3028,1.07697 -8.9992,5.99945 1.7737,-0.30948 3.4305,0.0307 4.7996,1.19988 -4.3035,-1.98209 -5.6594,6.11962 -9.2991,6.89936 0.7055,-1.47317 1.2194,-2.97283 1.7998,-4.49958 -0.289,0.51433 -1.36,2.46258 -2.0998,4.19962 -0.9513,2.23333 -1.3747,4.25619 0.8994,3.89962 2.6815,-0.41969 3.9566,-1.05119 6.5994,0.29996 0.1604,0.0815 0.4166,0.19315 0.5999,0.29997 0.8697,0.50617 1.9523,1.19458 2.9997,1.49987 0.5194,-0.12589 1.4274,0.31936 1.7999,0 -0.3763,0.16368 -0.7881,0.34662 -1.1999,0.29996 3.0295,3.11021 2.4204,6.05171 1.7998,8.39921 -0.621,2.3475 -1.3217,4.091 1.1999,5.3995 2.5216,1.3085 5.1278,-0.2432 8.0992,-2.3998 2.9714,-2.1566 6.495,-4.746 10.4991,-5.0995 8.0082,-0.7071 17.5494,6.3653 27.5974,5.9994 10.0479,-0.3658 14.9111,-7.1919 30.597,-9.29907 7.843,-1.05361 20.1041,-3.77898 32.097,-4.79957 5.7862,-0.49243 11.3081,-0.53657 16.4985,0.29999 0.048,-0.37868 0.261,-0.83522 0.2994,-1.19991 0.5044,-4.62142 0.3005,-8.09921 0.3005,-8.09921 l 34.1968,-59.69438 z m -8.6991,14.69864 c -4.3838,2.4582 -7.1019,6.99959 -3.8997,11.69887 2.631,-0.41669 3.1785,-3.76633 0,-3.59966 1.4791,-1.87195 0,-4.22926 2.0998,-5.69946 1.2679,-0.88982 3.6689,-0.20029 1.7999,-2.39975 z m -14.6986,15.29853 c 1.1968,-0.62576 1.5042,-0.37032 -0.8995,2.09979 -0.8773,0.49186 -1.6983,1.11039 -2.6997,1.49987 -2.5356,0.99105 -6.2994,3.05843 -6.2994,6.29941 -0.7756,0.0354 -1.6623,-0.25208 -2.3998,-0.89991 2.8184,-2.25589 5.7052,-4.56967 8.6992,-6.59938 0.4713,-0.32138 2.4028,-1.77405 3.5996,-2.39978 z" >
<animateTransform attributeName="transform" type = "translate" from="600" to="1000"
dur="10s" repeatCount="indefinite" />
</path>
</g>
</svg>

How can we define a color for each line in an SVG path

I'am working with a svg file to get the path of a triangles in a triangulated image using Delaunay triangulation .the paths are represented as below:
<path
fill="rgba(148,148,147,255)"
stroke="rgba(0,0,0,255)"
d="M410,224 L411,227 L410,227 L410,224"
/>
<path
fill="rgba(232,232,232,255)"
stroke="rgba(0,0,0,255)"
d="M179,108 L180,107 L183,113 L179,108"
/>
I want to define a color for each 2 values, i mean for example the segment M179,108 L180,107 in blue and l183,113 L179,108 in red.How can I do that ?
Thank you in advance.

How to fill in SVG paths?

I created this svg: https://svgshare.com/i/5z1.svg
If you view source you can see that each path looks like
<path stroke="black" stroke-width="10" fill="#666" d="M318237,48823 L321987,48823 M321987,48823 L321987,47323 M321987,47323 L318237,47323 M318237,47323 L318237,48823 Z" />
However, the svg still has just thin lines and each rectangular path remains unfilled. Is there a way to do this without converting the path into rectangles?

I believe that your paths are not closed and therefore they cannot be filled.
Let's see one path definition:
M318237,48823 L321987,48823 M321987,48823 L321987,47323 M321987,47323 L318237,47323 M318237,47323 L318237,48823 Z
Every M means moving to a point, L means drawing a line to a specified point. Z means closing the current subpath.
Anything that starts with M starts a new subpath. For example:
M318237,48823 L321987,48823
is a subpath which draws a line
M321987,48823 L321987,47323
Draws another line but without connecting it to the previous subpath, creating an unclosed path. It should be:
M318237,48823 L321987,48823 L321987,47323
and so on.
Full closed path:
<path stroke="black" stroke-width="10" fill="#666" d="M318237,48823 L321987,48823 L321987,47323 L318237,47323 L318237,48823 Z" />
The last line L318237,48823 can be omitted because that's what Z does anyway.
The definition could be also simplified using H and V commands since you have only straight horizontal/vertical lines.

SVG viewBox attribute places shape outside artboard in Illustrator

I am writing an SVG file that fits the shapes inside an artboard, by using the viewBox attribute. In Inkscape, the shapes are inside the artboard. But in Adobe Illustrator, the shape is placed above the artboard (vertically). How should I make the art fit for any software the SVG is going to be opened with?
The shape below forms the Z character. The svg code :
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"
width="22.640625" height="28.640625" viewBox="0.796875 -28.640625 22.640625 28.640625" >
<path d=" M 0.796875, 0.0 L 0.796875, -3.515625 L 15.46875, -21.859375 Q 17.03125, -23.8125 18.4375, -25.25
L 2.46875, -25.25 L 2.46875, -28.640625 L 22.96875, -28.640625 L 22.96875, -25.25 L 6.890625, -5.390625
L 5.15625, -3.375 L 23.4375, -3.375 L 23.4375, 0.0 L 0.796875, 0.0 Z"/>
</svg>
And the appearance in Illustrator:

I don't believe illustrator reads in viewbox info when opening an svg. It just uses the width and height and draws the artboad from 0,0. If your paths have any negative values or values larger than the respective width or height, they will appear off of the dartboard. If you make your files in illustrator, a new document will export its artboard coordinates as viewbox coordinates starting at 0,0 and should open correctly in other programs. If you are going to create images in other software to open in illustrator, you need to set your document up so that the viewbox starts at 0,0 and the path all have positive coordinates. That process will likely be different in various vector apps.

SVG fill color transparency / alpha?

Is it possible to set a transparency or alpha level on SVG fill colours?
I've tried adding two values to the fill tag (changing it from fill="#044B94" to fill="#044B9466"), but this doesn't work.

You use an addtional attribute; fill-opacity: This attribute takes a decimal number between 0.0 and 1.0, inclusive; where 0.0 is completely transparent.
For example:
<rect ... fill="#044B94" fill-opacity="0.4"/>
Additionally you have the following:
stroke-opacity attribute for the stroke
opacity for the entire object

As a not yet fully standardized solution (though in alignment with the color syntax in CSS3) you can use e.g fill="rgba(124,240,10,0.5)". Works fine in Firefox, Opera, Chrome.
Here's an example.

fill="#044B9466"
This is an RGBA color in hex notation inside the SVG, defined with hex values. This is valid, but not all programs can display it properly...
You can find the browser support for this syntax here: https://caniuse.com/#feat=css-rrggbbaa
As of August 2017: RGBA fill colors will display properly on Mozilla Firefox (54), Apple Safari (10.1) and Mac OS X Finder's "Quick View". However Google Chrome did not support this syntax until version 62 (was previously supported from version 54 with the Experimental Platform Features flag enabled).
As of April 2021, Inkscape version 1.0.2 cannot read this format in SVG files, and instead converts any RGBA color to opaque black. The bug report is here: https://gitlab.com/inkscape/inbox/-/issues/1195

To make a fill completely transparent, fill="transparent" seems to work in modern browsers. But it didn't work in Microsoft Word (for Mac), I had to use fill-opacity="0".
Update
As per the comment below from Alex Henrie, fill="none" might be a better choice.

Use attribute fill-opacity in your element of SVG.
Default value is 1, minimum is 0, in step use decimal values EX: 0.5 = 50% of alpha. Note: It is necessary to define fill color to apply fill-opacity.
See my example.
References.

To change transparency on an svg code the simplest way is to open it on any text editor and look for the style attributes. It depends on the svg creator the way the styles are displayed. As i am an Inkscape user the usual way it set the style values is through a style tag just as if it were html but using svg native attributes like fill, stroke, stroke-width, opacity and so on. opacity affects the whole svg object, or path or group in which its stated and fill-opacity, stroke-opacity will affect just the fill and the stroke transparency. That said, I have also used and tasted to just use fill and instead of using#fff use instead the rgba standard like this rgba(255, 255, 255, 1) just as in css. This works fine for must modern browsers.
Keep in mind that if you intend to further reedit your svg the best practice, in my experience, is to always keep an untouched version at hand. Inkscape is more flexible with hand changed svgs but Illustrator and CorelDraw may have issues importing and edited svg.
Example
<path style="fill:#ff0000;fill-opacity:1;stroke:#1a1a1a;stroke-width:2px;stroke-opacity:1" d="m 144.44226,461.14425 q 16.3125,-15.05769 37.64423,-15.05769 21.33173,0 36.38942,15.05769 15.0577,15.05769 15.0577,36.38942 0,21.33173 -15.0577,36.38943 -15.05769,16.3125 -36.38942,16.3125 -21.33173,0 -37.64423,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z M 28.99995,35.764435 l 85.32692,0 23.84135,52.701923 386.48078,0 q 10.03846,0 17.5673,7.528847 8.78366,7.528845 8.78366,17.567305 0,7.52885 -2.50962,12.54808 l -94.11058,161.87019 q -13.80288,27.60577 -45.17307,27.60577 l -194.4952,0 -26.35096,40.15385 q -2.50962,6.27404 -2.50962,7.52885 0,6.27404 6.27404,6.27404 l 298.64424,0 0,50.1923 -304.91828,0 q -25.09615,0 -41.40865,-13.80288 -15.05769,-13.80289 -15.05769,-38.89904 0,-15.05769 6.27404,-25.09615 l 38.89903,-63.9952 -92.855766,-189.475962 -52.701924,0 0,-52.701923 z M 401.67784,461.14425 q 15.05769,-15.05769 36.38942,-15.05769 21.33174,0 36.38943,15.05769 16.3125,15.05769 16.3125,36.38942 0,21.33173 -16.3125,36.38943 -15.05769,16.3125 -36.38943,16.3125 -21.33173,0 -36.38942,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z"/>
Example 2
<path style="fill:#ff0000;fill-opacity:.5;stroke:#1a1a1a;stroke-width:2px;stroke-opacity:1" d="m 144.44226,461.14425 q 16.3125,-15.05769 37.64423,-15.05769 21.33173,0 36.38942,15.05769 15.0577,15.05769 15.0577,36.38942 0,21.33173 -15.0577,36.38943 -15.05769,16.3125 -36.38942,16.3125 -21.33173,0 -37.64423,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z M 28.99995,35.764435 l 85.32692,0 23.84135,52.701923 386.48078,0 q 10.03846,0 17.5673,7.528847 8.78366,7.528845 8.78366,17.567305 0,7.52885 -2.50962,12.54808 l -94.11058,161.87019 q -13.80288,27.60577 -45.17307,27.60577 l -194.4952,0 -26.35096,40.15385 q -2.50962,6.27404 -2.50962,7.52885 0,6.27404 6.27404,6.27404 l 298.64424,0 0,50.1923 -304.91828,0 q -25.09615,0 -41.40865,-13.80288 -15.05769,-13.80289 -15.05769,-38.89904 0,-15.05769 6.27404,-25.09615 l 38.89903,-63.9952 -92.855766,-189.475962 -52.701924,0 0,-52.701923 z M 401.67784,461.14425 q 15.05769,-15.05769 36.38942,-15.05769 21.33174,0 36.38943,15.05769 16.3125,15.05769 16.3125,36.38942 0,21.33173 -16.3125,36.38943 -15.05769,16.3125 -36.38943,16.3125 -21.33173,0 -36.38942,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z"/>
Example 3
<path style="fill:rgba(255, 0, 0, .5);stroke:rgba(242, 242, 242, .5);stroke-width:2px" d="m 144.44226,461.14425 q 16.3125,-15.05769 37.64423,-15.05769 21.33173,0 36.38942,15.05769 15.0577,15.05769 15.0577,36.38942 0,21.33173 -15.0577,36.38943 -15.05769,16.3125 -36.38942,16.3125 -21.33173,0 -37.64423,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z M 28.99995,35.764435 l 85.32692,0 23.84135,52.701923 386.48078,0 q 10.03846,0 17.5673,7.528847 8.78366,7.528845 8.78366,17.567305 0,7.52885 -2.50962,12.54808 l -94.11058,161.87019 q -13.80288,27.60577 -45.17307,27.60577 l -194.4952,0 -26.35096,40.15385 q -2.50962,6.27404 -2.50962,7.52885 0,6.27404 6.27404,6.27404 l 298.64424,0 0,50.1923 -304.91828,0 q -25.09615,0 -41.40865,-13.80288 -15.05769,-13.80289 -15.05769,-38.89904 0,-15.05769 6.27404,-25.09615 l 38.89903,-63.9952 -92.855766,-189.475962 -52.701924,0 0,-52.701923 z M 401.67784,461.14425 q 15.05769,-15.05769 36.38942,-15.05769 21.33174,0 36.38943,15.05769 16.3125,15.05769 16.3125,36.38942 0,21.33173 -16.3125,36.38943 -15.05769,16.3125 -36.38943,16.3125 -21.33173,0 -36.38942,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z"/>
Notice that in the last example the fill-opacity and stroke-opacity have been removed as rgba standard covers both color and alpha channel in both cases.

I am sharing a related tip that you might come across when you want the SVG to inherit the container's styles like normal state, hover state and visited state :
use fill='currentColor' on the path. This is how the SVG's produced by font awesome icons could take any fore color applied to fonts!

Resources