I am currently trying to understand the path function of SVG Images. I took a SVG from Wikipedia (map of the world, but everything is removed except for once little thing). This is the SVG 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"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
height="480"
width="960"
version="1.1"
id="svg11"
sodipodi:docname="map.svg"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
<metadata
id="metadata17">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs15" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1002"
id="namedview13"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="256"
inkscape:cx="959.32356"
inkscape:cy="478.85011"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:current-layer="svg11" />
<g
id="g9"
style="stroke:#000000;stroke-width:0.25;stroke-linejoin:bevel"
transform="matrix(2.0368307,0,0,2.0374975,-34.589547,-22.659498)">
<use
xlink:href="#a"
id="use2"
style="stroke-width:1.5"
x="0"
y="0"
width="100%"
height="100%" />
<g
id="a"
style="fill:#ffffff">
<path
d="m 481.4,220 -1,3.2 7.3,-5.2 -2.1,-2.8 V 212 l -1.2,0.5 v 4.5 z"
id="path6"
inkscape:connector-curvature="0" />
</g>
</g>
</svg>
The only part I am currently interested in is:
<path
d="m 481.4,220 -1,3.2 7.3,-5.2 -2.1,-2.8 V 212 l -1.2,0.5 v 4.5 z"
id="path6"
inkscape:connector-curvature="0" />
From what I understood, you need a command and parameters for the path. So the m would be "move relative to current cursor pos). The cursor is 0, 0, so it moved 0+481.4, 0+220, but after that there are just coordinates without a command. How are these to be interpreteted? Are these implicit l commands? For better unstanding, I am talking e.g. about -1,3.2 after the move. What does these do?
The answer by #Mehdi is not quite correct.
If a command is repeated (ie. the same as the previous one) then it can be omitted. So for example
L 1 2 L 3 4 L 5 6
can be abbreviated to
L 1 2 3 4 5 6
The exception is for M and m. In those cases L and l are substituted respectively.
So in #Mehdi's example
d="m 481.4,220 -1,3.2"
is actually equivalent to
d="m 481.4,220 l -1,3.2"
The definitive source for answers to questions like these is the Paths section of the SVG specification
An warning is given, and no output file is written, with the following:
$ inkscape --export-area-drawing --export-text-to-path --without-gui --export-eps=`pwd`/text.eps `pwd`/text.svg
** Message: CairoRenderer: empty bounding box.
** (inkscape-bin:21588): WARNING **: Failed to save pdf to: <current dir>/text.eps
Inkscape version: 0.92.2 5c3e80d, 2017-08-06
The contents of "text.svg" is given below.
The problem seems to be the text of the <flowPara> element near the end, specifically all the ............ Interestingly, if I have fewer periods (.) the problem doesn't occur (an EPS file is generated), or if I have the same number of more, but change to another character (say x), that also works.
Can this behaviour be explained?
Contents of "text.svg":
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<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"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="1700pt"
height="863pt"
viewBox="0 0 2185.0001 1078.75"
id="svg3342"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="text1_footage_height.svg">
<defs
id="defs3344" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#00ff00"
borderopacity="1"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.24748737"
inkscape:cx="688.58994"
inkscape:cy="-452.54794"
inkscape:document-units="pt"
inkscape:current-layer="layer1"
showgrid="false"
units="pt"
inkscape:window-width="2560"
inkscape:window-height="1377"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata3347">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,26.387778)">
<flowRoot
xml:space="preserve"
id="flowRoot3352"
style="font-style:normal;font-weight:normal;font-size:120px;line-height:125%;font-family:sans-serif;letter-spacing:1px;word-spacing:15px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
transform="translate(-162.85714,-214.95921)"><flowRegion
id="flowRegion3354"><rect
id="rect3356"
width="1700"
height="3975.4438"
x="162.85715"
y="190.17857"
style="letter-spacing:1px" /></flowRegion>
<flowPara
style="font-style:normal;
font-variant:normal;
font-weight:black;
font-stretch:normal;
font-family:Sari Offc;
-inkscape-font-specification:'Sari Offc Black';font-size:120px;line-height:125%;text-align:center;letter-spacing:1px;word-spacing:15px;text-anchor:middle;fill:#ffffff"
id="flowPara3406">................................................................................</flowPara>
</flowRoot></g>
</svg>
I have an svg created with Inkscape. I can see well the img in the original program Inkscape, it's also ok in Chrome but I see nothing in Safari and Firefox.
I tried to find the problem making a copy and make the document as simple as possible. I end up with just the letter "p" convert to a path.
Then I tried to reproduce the error and I create a new svg document with Inkscape and I draw anything, like a "p" converted to a path. It works well in all browsers.
If I open the wrong svg with a code editor this is what I see:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<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"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="180"
height="180"
viewBox="0 0 47.625001 47.625001"
version="1.1"
id="svg8"
inkscape:version="0.92.2 5c3e80d, 2017-08-06"
sodipodi:docname="p.svg"
enable-background="new"
inkscape:export-filename="/Users/narcis/Dropbox/feines/business/projectes/want/want-web/want-parts/svg/p.png"
inkscape:export-xdpi="300"
inkscape:export-ydpi="300">
<defs
id="defs2">
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter853">
<feBlend
inkscape:collect="always"
mode="color-burn"
in2="BackgroundImage"
id="feBlend855" />
</filter>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="90"
inkscape:cy="90"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
showguides="false"
inkscape:guide-bbox="true"
inkscape:window-width="1592"
inkscape:window-height="915"
inkscape:window-x="0"
inkscape:window-y="1"
inkscape:window-maximized="0"
units="px" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-249.37498)"
style="filter:url(#filter853);opacity:1">
<path
inkscape:connector-curvature="0"
id="path818"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:35.27777863px;line-height:125.99999905%;font-family:futura;-inkscape-font-specification:'futura Bold';letter-spacing:0px;word-spacing:0px;fill:#020202;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 27.693056,269.00706 q 0,-0.84667 -0.3175,-1.5875 -0.282222,-0.77611 -0.846667,-1.34056 -0.564444,-0.56444 -1.340556,-0.88194 -0.740833,-0.35277 -1.622777,-0.35277 -0.846667,0 -1.5875,0.31749 -0.740834,0.3175 -1.305278,0.88194 -0.529167,0.56446 -0.881945,1.34056 -0.3175,0.74083 -0.3175,1.5875 0,0.84667 0.3175,1.5875 0.3175,0.74083 0.881945,1.30528 0.564444,0.52916 1.305278,0.88194 0.776111,0.3175 1.622777,0.3175 0.846667,0 1.5875,-0.3175 0.740834,-0.3175 1.270001,-0.88194 0.564444,-0.56445 0.881944,-1.30528 0.352778,-0.74083 0.352778,-1.55222 z M 19.649722,287.034 h -6.385278 v -27.12861 h 6.385278 v 2.01083 q 2.046111,-2.57527 5.573889,-2.57527 1.940278,0 3.598334,0.77612 1.693333,0.74083 2.928055,2.04611 1.234723,1.30527 1.905,3.06916 0.705556,1.76388 0.705556,3.77472 0,2.01083 -0.705556,3.73945 -0.670277,1.72861 -1.905,3.03388 -1.199444,1.30528 -2.8575,2.04611 -1.658055,0.74084 -3.598333,0.74084 -3.386667,0 -5.644445,-2.32834 z" />
</g>
</svg>
Here is the code of the file that I reproduced and works well in all browsers:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<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"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="180"
height="180"
viewBox="0 0 47.624999 47.625001"
version="1.1"
id="svg4510"
inkscape:version="0.92.2 5c3e80d, 2017-08-06"
sodipodi:docname="p-be.svg">
<defs
id="defs4504" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="-50.54196"
inkscape:cy="90"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1920"
inkscape:window-height="1035"
inkscape:window-x="67"
inkscape:window-y="36"
inkscape:window-maximized="0" />
<metadata
id="metadata4507">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-249.37498)">
<g
aria-label="p"
style="font-style:normal;font-weight:normal;font-size:5.29166651px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="text5057">
<path
d="m 27.693056,269.00707 q 0,-0.84667 -0.3175,-1.5875 -0.282223,-0.77612 -0.846667,-1.34056 -0.564445,-0.56444 -1.340556,-0.88194 -0.740833,-0.35278 -1.622777,-0.35278 -0.846667,0 -1.587501,0.3175 -0.740833,0.3175 -1.305277,0.88194 -0.529167,0.56445 -0.881945,1.34056 -0.3175,0.74083 -0.3175,1.5875 0,0.84666 0.3175,1.5875 0.3175,0.74083 0.881945,1.30528 0.564444,0.52916 1.305277,0.88194 0.776112,0.3175 1.622778,0.3175 0.846667,0 1.5875,-0.3175 0.740834,-0.3175 1.27,-0.88194 0.564445,-0.56445 0.881945,-1.30528 0.352778,-0.74084 0.352778,-1.55222 z m -8.043334,18.02694 H 13.264444 V 259.9054 h 6.385278 v 2.01083 q 2.046111,-2.57528 5.573889,-2.57528 1.940278,0 3.598334,0.77612 1.693333,0.74083 2.928055,2.04611 1.234722,1.30527 1.905,3.06916 0.705556,1.76389 0.705556,3.77473 0,2.01083 -0.705556,3.73944 -0.670278,1.72861 -1.905,3.03389 -1.199444,1.30528 -2.8575,2.04611 -1.658056,0.74083 -3.598333,0.74083 -3.386667,0 -5.644445,-2.32833 z"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:35.27777863px;font-family:Futura;-inkscape-font-specification:'Futura Bold';stroke-width:0.26458332px"
id="path814" />
</g>
</g>
</svg>
I know nothing about svg code. Can anyone tell me what's wrong and why that svg has problems with Safari and Firefox?
You are using a filter that contains the primitive
<feBlend in2="BackgroundImage" mode="color-burn" />
The Blend mode color-burn has been part of Inkscape for some time, but it is not defined in the SVG 1.1 specification. For the SVG 2 spec, filter effects have been moved to CSS Filter Effects. The blend mode is defined there, but not yet implemented by all browsers.
But that is a secondary problem. The main issue is the attempt to use a background image as a source for blending. I am not aware of this working anywhere yet. Currently, filters only support the use of the source graphic, its transparency, fill or stroke as input.
If you want to use anything but the source graphic as an input to compositing, you'll have to import it via an <feImage> filter primitive as described here.
What you probably did in Inkscape to introduce that filter was to open the Layer->Layers... editor and select Blend mode: "Coror burn". Select "Normal" to delete the filter. No other selection will work outside of Inkscape.
I have created an SVG file to display an icon for an open folder.
It consists of a rectangle for the tab and a rectangle for the backleaf of the folder, with the open leaf represented by a polygon.
Image editors display the intended result, but browsers seem to ignore the polygon.
what am I missing?
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="folder_icon" xmlns="http://www.w3.org/2000/svg"
width="90" height="60" viewbox="0 0 90 60" preserveAspectRatio="xMidYMid slice"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g width="50%" height="80%">
<g id="g3" fill="#ffee77" stroke="#bb7711" stroke-width="2px" opacity="0.7">
<g id="g2">
<rect x="16%" y="1%" rx="6%" ry="6%" width="30%" height="30%" />
<rect x="1%" y="16%" rx="0%" ry="0%" width="84%" height="82%" />
<polygon points="17% 20%, 90% 20%, 75% 59%, 1% 59%" />
</g>
</g>
</g>
</svg>
The same file converted to a PNG is displayed as intended, but I would prefer to use the scalable graphic.
I'm trying to generate svg-Code in a web-application.
Here's an example output:
<?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 xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
version="1.1" baseProfile="full"
width="1000px" height="600px">
<rect x="147.50198255352893" y="109.43695479777953" width="15.860428231562253" height="295.79698651863595" stroke="rgb(0,0,0)" fill="rgb(255,255,255)" stroke-width="3" transform="rotate(20 155.43219666931006 257.3354480570975)"/>
<rect x="163.36241078509119" y="405.2339413164155" width="379.85725614591587" height="-23.79064234734335" stroke="rgb(0,0,0)" fill="rgb(255,255,255)" stroke-width="3" transform="rotate(20 353.2910388580491 393.3386201427438)"/>
<rect x="543.219666931007" y="381.44329896907215" width="22.204599524187188" height="-353.6875495638382" stroke="rgb(0,0,0)" fill="rgb(255,255,255)" stroke-width="3" transform="rotate(20 554.3219666931006 204.59952418715304)"/>
</svg>
There should be three rotated Rectangles, but somehow in Chrome, Safari, and Inkscape only one of them is displayed. I did google and have no clue what is wrong.
Your problem is caused by the negative heights of the second and third <rect />.
If you generate this code automatically make sure these values are positive. For example, using JavaScript, wrap them up in Math.abs( height ).