Inkscape 0.92 - How to Get SVG Path Coordinates? - svg

Inkscape saves paths as relative instead of absolute, hence:
0, 0, 100, 0, 100, 100, 0, 100
becomes:
M -0.06681738,270.60714 H 26.5265 V 297 H 0 Z
Apparently, in previous versions of Inkscape (0.4), it was possible to change this by switching Path data value from Relative to Absolute, however, this no longer works.
There was also a Java-based converter, which I was unable to run.
I would write my own converter in Python, if I knew what these values meant.
Edit whole code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="svg8"
version="1.1"
viewBox="0 0 26.458333 26.458334"
height="100"
width="100">
<defs
id="defs2" />
<g
transform="translate(0,-270.60714)"
id="layer1">
<path
id="path815"
d="M -0.06681738,270.60714 H 26.5265 V 297 H 0 Z"
style="fill:none;stroke:#000000;stroke-width:1.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
</svg>

Related

Unable to upload SVG images to any glyph maker, but renders correctly in Inkscape

I've been trying to get an Operator-similar font to be created a TTF for, but for some reason it appears to be empty whenever I try to upload it to a service. I was able to render it in Inkscape correctly, so I don't think it would be a problem with the exact SVG image. Here is the uppercase B, for reference (simplified):
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg preserveAspectRatio="xMinYMin none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="">
<g i:e="1" transform="matrix(10,27.5,0,1.25,0,-168)" style="height:auto;overflow-x:visible;overflow-y:visible;width:auto;perspective-origin:0px 0px;transform:matrix(10, 27.5, 0, 1.25, 0, -168);transform-origin:0px 0px;">
<i:p style="height:auto;overflow-x:visible;overflow-y:visible;width:auto;perspective-origin:50% 50%;transform-origin:0px 0px;"/>
<g q:rq="0" style="height:auto;overflow-x:visible;overflow-y:visible;width:auto;perspective-origin:0px 0px;transform-origin:0px 0px;">
<path fill="#414141" d="M3.773 86.883L4.0 81.723C3.766 80.938 3.52 80.418 3.258 80.211L2.938 87.258C2.676 99.059 2.43 110.379 2.195 121.488L2.414 116.656C2.492 113.035 2.566 109.441 2.645 105.77L3.539 86.129C3.617 86.344 3.699 86.59 3.773 86.883ZM3.078 85.84L3.105 85.207C3.234 85.43 3.359 85.652 3.48 85.957L2.703 103.063C2.828 97.375 2.953 91.605 3.078 85.84Z" style="height:auto;overflow-x:visible;overflow-y:visible;width:auto;perspective-origin:0px 0px;transform-origin:0px 0px;fill:rgb(65, 65, 65);d:path('M 3.773 86.883 L 4 81.723 C 3.766 80.938 3.52 80.418 3.258 80.211 L 2.938 87.258 C 2.676 99.059 2.43 110.379 2.195 121.488 L 2.414 116.656 C 2.492 113.035 2.566 109.441 2.645 105.77 L 3.539 86.129 C 3.617 86.344 3.699 86.59 3.773 86.883 Z M 3.078 85.84 L 3.105 85.207 C 3.234 85.43 3.359 85.652 3.48 85.957 L 2.703 103.063 C 2.828 97.375 2.953 91.605 3.078 85.84 Z');"/>
</g>
</g>
</svg>
Could this be a problem with the way it was created? I did try to resave it in Inkscape, but it doesn't seem to be working correctly even then.

As I tested you SVG it wasn't a valid code and didn't work for me, but its capital A and here's the new SVG below:
<?xml version="1.0" encoding="utf-8"?>
<svg width="100" height="100" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 27.2 32.6" enable-background="new 0 0 27.2 32.6" xml:space="preserve">
<g>
<path d="M7.9,22.1L4.7,32H0.5L11.2,0.6H16L26.8,32h-4.3l-3.4-9.9H7.9z M18.2,18.9l-3.1-9c-0.7-2-1.2-3.9-1.6-5.7h-0.1
c-0.5,1.9-1,3.8-1.6,5.7l-3.1,9.1H18.2z"/>
</g>
</svg>
Try that and let me know if it works.
I added height and width but you can remove them or change the value

Draw Bezier Curve with relative path in SVG

I got a very strange question when drawing Bezier Curve in SVG using relative path. At first, I wrote a path with absolute path like this:
<?xml version="1.0" standalone="no"?>
<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M110 110 C 120 120, 140 120, 150 110" stroke="black" fill="transparent"/>
</svg>
And I got a curve like this:
bezier curve
But when I used relative path by c, like this:
<?xml version="1.0" standalone="no"?>
<svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M110 110 c 10 10, 20 0, 10 -10" stroke="black" fill="transparent"/>
</svg>
I got another bezier curve
It was totally different. But I think they are actually the same path. What's wrong with me?

You don't actually say, but I assume you want to know why the paths are different(?)
The reason is because your assumption about how relative coords work is wrong. All the coords in a relative bezier segment are expressed relative to the last point in the last segment (ie. 110,110). Not the last point in the bezier.
<svg width="190px" height="160px">
<path d="M110 110 C 120 120, 140 120, 150 110" stroke="black" fill="transparent" stroke-width="10"/>
<path d="M110 110 c 10 10, 30 10, 40 0" stroke="green" fill="transparent" stroke-width="5"/>
</svg>

Export SVG for ObjectBoundingBox

I have very little experience with SVG and I'm trying to save a path from illustrator so that it can be used as a responsive clipping mask whose size is relative to its parent, using clipPathUnits="objectBoundingBox".
However, Illustrator doesn't seem to allow me to have relative path values between 0 and 1 and only exports absolute values.
How could I get code like this...
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100">
<clippath id="clipping-mask">
<path d="M49.401,64H36.3V30.648h11.201c3.9,0,7.15,0.25,10.501,2.4c4.95,3.15,7.1,8.45,7.1,14.151
C65.102,56.75,59.352,64,49.401,64z M48.501,38.148h-3.7V56.5h3.65c5.7,0,8.15-3.65,8.15-9.051
C56.602,42.148,54.252,38.148,48.501,38.148z"/>
</clippath>
</svg>
... to be relative to its parent?
Thanks!

Taking a cue from Paul LeBeau's answer and from the answer at https://graphicdesign.stackexchange.com/a/42666 I figured out that you can actually set the art board in Illustrator to 1x1 and when saving to SVG increase the decimal places in the SVG Options on save. This will result in an SVG with the decimals already adjusted.

I don't think you can do that with Illustrator directly. And I don't know of any tool to do the conversion. However it is possible to do it manually with a little help from AI.
I would start by designing your clipping path on a page that is 100x100, and treat those coordinates as percentages. Then after exporting. Go throught the path definition adjusting all the coordinates by two decimal places.
Using your path as an example:
M .49401,.64
H .363
V .30648
h .11201
c .039, 0, .0715, .0025, .10501, .024
c .0495, .0315, .071, .0845, .071, .14151
C .65102, .5675, .59352, .64, .49401, .64
z
M .48501, .38148
h -.037
V .565
h .0365
c .057, 0, .0815 -.0365, .0815 -.09051
C .56602, .42148, .54252, .38148, .48501, .38148
z
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"
viewBox="0 0 100 100">
<path d="M49.401,64H36.3V30.648h11.201c3.9,0,7.15,0.25,10.501,2.4c4.95,3.15,7.1,8.45,7.1,14.151
C65.102,56.75,59.352,64,49.401,64z M48.501,38.148h-3.7V56.5h3.65c5.7,0,8.15-3.65,8.15-9.051
C56.602,42.148,54.252,38.148,48.501,38.148z"/>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"
viewBox="0 0 100 100">
<clipPath id="clipping-mask" clipPathUnits="objectBoundingBox">
<path d="M .49401,.64
H .363
V .30648
h .11201
c .039, 0, .0715, .0025, .10501, .024
c .0495, .0315, .071, .0845, .071, .14151
C .65102, .5675, .59352, .64, .49401, .64
z
M .48501, .38148
h -.037
V .565
h .0365
c .057, 0, .0815 -.0365, .0815 -.09051
C .56602, .42148, .54252, .38148, .48501, .38148
z"/>
</clipPath>
<rect width="100%" height="100%" fill="red" clip-path="url(#clipping-mask)"/>
</svg>
It's a bit tedious, I know, but if you have a lot of them to do you could probably write a script for it pretty easily.

How to fill a Donut Shape drawn with a Path Element without using fillRule EvenOdd

Hey guys I'll need your help since Google didn't helped me.
My goal is to understand the svg path's and draw a circle in a circle.
The final result should be a ring because I expect that the 2nd circle is masking the first one. I found a svg which is doning this and in general it is doing the same like me but with more steps. Moving to a start point, drawing the first circle, moving to the start point of 2nd circle, drawing the second circle and close the path. I don't know what I do wrong that my paths are not masked.
I can't use fill style evenodd because i want to import the svg into fontello.
Could you tell me what i did wrong in the second svg that the second circle is not masking the first?
The working sample svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="0.52777803in" height="0.52777803in" viewBox="-2 -2 42 42" id="svg2">
<path d="m 19,-0.5
C
33.588007,4.3721285 38.5,9.3333333 38.5,19
38.5,28.666667 33.588007,33.627872 28.71875,36.0625
23.849493,38.4971 19,38.5 19,38.5
19,38.5 14.150507,38.4971 9.28125,36.0625
4.411993,33.627872 -0.5,28.666667 -0.5,19
-0.5,9.3333333 4.411993,4.3721285 9.28125,1.9375
14.150507,-0.497128 19,0 19,0
19,0 23.650507,0.497128 28.28125,2.8125
32.911993,5.1278715 37.5,9.6666667 37.5,19
37.5,28.333333 32.911993,32.872128 28.28125,35.1875
23.650507,37.502872 19,37.5 19,37.5
19,37.5 14.349493,37.5029 9.71875,35.1875
5.088007,32.872128 0.5,28.333333 0.5,19
0.5,9.6666667 5.088007,5.1278715 9.71875,2.8125
14.349493,0.49712848 19,0.5 19,0.5
m 0,4
C 19,4.5 15.349493,4.49713 11.71875,6.3125
8.088007,8.1278715 4.5,11.666667 4.5,19
4.5,26.333333 8.088007,29.872128 11.71875,31.6875
15.349493,33.5029 19,33.5 19,33.5
c 0,0 3.650507,0.0029 7.28125,-1.8125
C 29.911993,29.872128 33.5,26.333333 33.5,19
33.5,11.666667 29.911993,8.1278715 26.28125,6.3125
22.650507,4.49713 19,4 19,4
19,4 15.150507,3.50287 11.28125,5.4375
7.411993,7.3721285 3.5,11.333333 3.5,19
3.5,26.666667 7.411993,30.627872 11.28125,32.5625
15.150507,34.497128 19,34.5 19,34.5
c 0,0 3.849493,-0.0029 7.71875,-1.9375
C 30.588007,30.627872 34.5,26.666667 34.5,19
34.5,11.333333 30.588007,7.3721285 26.71875,5.4375
22.849493,3.5028715 19,3.5 19,3.5 z" />
</svg>
My own not working svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px" viewBox="0 0 500 500">
<path d="m250 0
c333 0 333 500 0 500-333 0-333-500 0-500
m0 10
c315 0 315 480 0 480-315 0-315-480 0-480z" />
</svg>

You have to draw the second circle in the opposite direction to the first if you don't want to use evenodd. Read how fill rules work in svg.
<path stroke="blue" d="m250 0
c333 0 333 500 0 500-333 0-333-500 0-500
m0 10
c-315 0 -315 480 0 480
315 0 315 -480 0 -480" />
</svg>

How can a SVG sprite be made using independent SVG images?

How can I combine SVG icons from http://raphaeljs.com/icons/ to make a CSS Sprite.
When I do this:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30em" height="160em" viewBox="0 0 30 160" enable-background="new 0 0 30 160" xml:space="preserve">
<g id="icons">
<g id="linkedin">
<path d="M27.25,3.125h-22c-1.104,0-2,0.896-2,2v22c0,1.104,0.896,2,2,2h22c1.104,0,2-0.896,2-2v-22C29.25,4.021,28.354,3.125,27.25,3.125zM11.219,26.781h-4v-14h4V26.781zM9.219,11.281c-1.383,0-2.5-1.119-2.5-2.5s1.117-2.5,2.5-2.5s2.5,1.119,2.5,2.5S10.602,11.281,9.219,11.281zM25.219,26.781h-4v-8.5c0-0.4-0.403-1.055-0.687-1.213c-0.375-0.211-1.261-0.229-1.665-0.034l-1.648,0.793v8.954h-4v-14h4v0.614c1.583-0.723,3.78-0.652,5.27,0.184c1.582,0.886,2.73,2.864,2.73,4.702V26.781z"
/>
</g>
<g id="github">
<path d="M 500 800 M28.436,15.099c-1.201-0.202-2.451-0.335-3.466-0.371l-0.179-0.006c0.041-0.09,0.072-0.151,0.082-0.16c0.022-0.018,0.04-0.094,0.042-0.168c0-0.041,0.018-0.174,0.046-0.35c0.275,0.01,0.64,0.018,1.038,0.021c1.537,0.012,3.145,0.136,4.248,0.331c0.657,0.116,0.874,0.112,0.389-0.006c-0.491-0.119-1.947-0.294-3.107-0.37c-0.779-0.053-1.896-0.073-2.554-0.062c0.019-0.114,0.041-0.241,0.064-0.371c0.093-0.503,0.124-1.009,0.126-2.016c0.002-1.562-0.082-1.992-0.591-3.025c-0.207-0.422-0.441-0.78-0.724-1.104c0.247-0.729,0.241-1.858-0.015-2.848c-0.211-0.812-0.285-0.864-1.021-0.708C22.19,4.019,21.69,4.2,21.049,4.523c-0.303,0.153-0.721,0.391-1.024,0.578c-0.79-0.278-1.607-0.462-2.479-0.561c-0.884-0.1-3.051-0.044-3.82,0.098c-0.752,0.139-1.429,0.309-2.042,0.511c-0.306-0.189-0.75-0.444-1.067-0.604C9.973,4.221,9.473,4.041,8.847,3.908c-0.734-0.157-0.81-0.104-1.02,0.708c-0.26,1.003-0.262,2.151-0.005,2.878C7.852,7.577,7.87,7.636,7.877,7.682c-1.042,1.312-1.382,2.78-1.156,4.829c0.059,0.534,0.15,1.024,0.277,1.473c-0.665-0.004-1.611,0.02-2.294,0.064c-1.162,0.077-2.618,0.25-3.109,0.369c-0.484,0.118-0.269,0.122,0.389,0.007c1.103-0.194,2.712-0.32,4.248-0.331c0.29-0.001,0.561-0.007,0.794-0.013c0.07,0.237,0.15,0.463,0.241,0.678L7.26,14.759c-1.015,0.035-2.264,0.168-3.465,0.37c-0.901,0.151-2.231,0.453-2.386,0.54c-0.163,0.091-0.03,0.071,0.668-0.106c1.273-0.322,2.928-0.569,4.978-0.741l0.229-0.02c0.44,1.022,1.118,1.802,2.076,2.41c0.586,0.373,1.525,0.756,1.998,0.816c0.13,0.016,0.508,0.094,0.84,0.172c0.333,0.078,0.984,0.195,1.446,0.262h0.011c-0.009,0.006-0.017,0.01-0.025,0.016c-0.56,0.291-0.924,0.744-1.169,1.457c-0.11,0.033-0.247,0.078-0.395,0.129c-0.529,0.18-0.735,0.217-1.271,0.221c-0.556,0.004-0.688-0.02-1.02-0.176c-0.483-0.225-0.933-0.639-1.233-1.133c-0.501-0.826-1.367-1.41-2.089-1.41c-0.617,0-0.734,0.25-0.288,0.615c0.672,0.549,1.174,1.109,1.38,1.537c0.116,0.24,0.294,0.611,0.397,0.824c0.109,0.227,0.342,0.535,0.564,0.748c0.522,0.498,1.026,0.736,1.778,0.848c0.504,0.074,0.628,0.074,1.223-0.002c0.287-0.035,0.529-0.076,0.746-0.127c0,0.244,0,0.525,0,0.855c0,1.766-0.021,2.334-0.091,2.5c-0.132,0.316-0.428,0.641-0.716,0.787c-0.287,0.146-0.376,0.307-0.255,0.455c0.067,0.08,0.196,0.094,0.629,0.066c0.822-0.051,1.403-0.355,1.699-0.891c0.095-0.172,0.117-0.518,0.147-2.318c0.032-1.953,0.046-2.141,0.173-2.42c0.077-0.166,0.188-0.346,0.25-0.395c0.104-0.086,0.111,0.084,0.111,2.42c-0.001,2.578-0.027,2.889-0.285,3.385c-0.058,0.113-0.168,0.26-0.245,0.33c-0.135,0.123-0.192,0.438-0.098,0.533c0.155,0.154,0.932-0.088,1.356-0.422c0.722-0.572,0.808-1.045,0.814-4.461l0.003-2.004l0.219,0.021l0.219,0.02l0.036,2.621c0.041,2.951,0.047,2.994,0.549,3.564c0.285,0.322,0.572,0.5,1.039,0.639c0.625,0.188,0.813-0.102,0.393-0.605c-0.457-0.547-0.479-0.756-0.454-3.994c0.017-2.076,0.017-2.076,0.151-1.955c0.282,0.256,0.336,0.676,0.336,2.623c0,2.418,0.069,2.648,0.923,3.07c0.399,0.195,0.511,0.219,1.022,0.221c0.544,0.002,0.577-0.006,0.597-0.148c0.017-0.115-0.05-0.193-0.304-0.348c-0.333-0.205-0.564-0.467-0.709-0.797c-0.055-0.127-0.092-0.959-0.117-2.672c-0.036-2.393-0.044-2.502-0.193-2.877c-0.201-0.504-0.508-0.902-0.897-1.166c-0.101-0.066-0.202-0.121-0.333-0.162c0.161-0.016,0.317-0.033,0.468-0.055c1.572-0.209,2.403-0.383,3.07-0.641c1.411-0.543,2.365-1.445,2.882-2.724c0.046-0.114,0.092-0.222,0.131-0.309l0.398,0.033c2.051,0.173,3.706,0.42,4.979,0.743c0.698,0.177,0.831,0.198,0.668,0.105C30.666,15.551,29.336,15.25,28.436,15.099zM22.422,15.068c-0.233,0.512-0.883,1.17-1.408,1.428c-0.518,0.256-1.33,0.451-2.25,0.544c-0.629,0.064-4.137,0.083-4.716,0.026c-1.917-0.188-2.991-0.557-3.783-1.296c-0.75-0.702-1.1-1.655-1.039-2.828c0.039-0.734,0.216-1.195,0.679-1.755c0.421-0.51,0.864-0.825,1.386-0.985c0.437-0.134,1.778-0.146,3.581-0.03c0.797,0.051,1.456,0.051,2.252,0c1.886-0.119,3.145-0.106,3.61,0.038c0.731,0.226,1.397,0.834,1.797,1.644c0.18,0.362,0.215,0.516,0.241,1.075C22.808,13.699,22.675,14.517,22.422,15.068zM12.912,11.762c-1.073-0.188-1.686,1.649-0.863,2.587c0.391,0.445,0.738,0.518,1.172,0.248c0.402-0.251,0.62-0.72,0.62-1.328C13.841,12.458,13.472,11.862,12.912,11.762zM19.425,11.872c-1.073-0.188-1.687,1.647-0.864,2.586c0.392,0.445,0.738,0.519,1.173,0.247c0.401-0.25,0.62-0.72,0.62-1.328C20.354,12.569,19.985,11.971,19.425,11.872zM16.539,15.484c-0.023,0.074-0.135,0.184-0.248,0.243c-0.286,0.147-0.492,0.096-0.794-0.179c-0.187-0.169-0.272-0.258-0.329-0.081c-0.053,0.164,0.28,0.493,0.537,0.594c0.236,0.094,0.405,0.097,0.661-0.01c0.254-0.106,0.476-0.391,0.476-0.576C16.842,15.303,16.595,15.311,16.539,15.484zM16.222,14.909c0.163-0.144,0.2-0.44,0.044-0.597s-0.473-0.133-0.597,0.043c-0.144,0.206-0.067,0.363,0.036,0.53C15.865,15.009,16.08,15.034,16.222,14.909z"
/>
</g>
</g>
</svg>
the SVG icons overlap. How can I modify these to have an offset between two icons?
For instance, the one similar to http://dbushell.com/demos/css-sprites/sprite.svg

Try to replace the 2nd M command to m command.
"M" means absolute position, "m" means relative position.
so,
<M 500 800 ｍ28.436,15.099c-1.201-0.202-2.…

Resources