I would like to place a svg path (which comes from an external source) at some exact location inside an other svg. For instance, placing a drawing at the center of a rectangle. Here is an example:
<svg width="450" height="500"
xmlns="http://www.w3.org/2000/svg">
<rect x="25" y="25" width="400" height="450" style="fill:blue;stroke-width:3;stroke:rgb(0,0,0)" />
<svg x="50" y="50" width="300" height="350">
<g style="display:inline;fill:#fcef3c;stroke:#000000;stroke-width:3" id="main">
<path d="m 292.3,221.7 c -4,-11 -7,-22.2 -4,-35 l 8,4.1 c -6,-9.9 -9,-23 -6,-34.7 3,1.5 8,6.4 13,9.1 -6,-13.4 -3,-26.9 -3,-40.3 l -2,-8.8 7,-0.2 c -11,-12.8 -9,-32.96 -21,-42.33 l 6,-8.54 c 2,-2.69 0,-5.38 -1,-8.07 -3,-7.76 -10,-9.55 -15,-12.58 l -8,3.16 -9,8.75 c -15,-3.66 -22,-3.4 -29,-3.37 l -9,4.71 -5,6.05 -1,6.05 -21,10.09 c -1,2.13 -2,4.47 1,5.38 2,1.05 4,2.21 5,5.02 -1,2.81 -2,5.62 -1,8.43 0,3.05 1,6.05 3,8.65 23,-6 16,-8.52 25,-8.82 5,0.21 7,0.66 9,3.32 l 1,5.4 c -3,-0.6 -7,-0.2 -11,-2.5 -7,-0.6 -13,2.7 -18,6.1 -23,14.2 -70,-0.4 -28,-20.63 -29,-1.98 -46,37.83 -9,41.83 17,1.2 20,-4.2 34,-9.2 4,1.1 3,8.1 5,8.4 1,2.6 4,3.9 6,5.2 8,-0.3 14,0.4 15,3.3 1,2.1 1,3.1 -1,4 -2,3.9 -5,6.7 -9,8.7 -5,0.8 -10,0.2 -15,-0.2 -9,-5.1 -13,-10.1 -16,-15.2 -1,5.9 -1,13.1 2,16.5 -8,-0.1 -15,1.8 -22,6.1 -12,7.7 -25,19.7 -36,30.3 -8,4 -16,9.1 -26,7.6 -17,-8.6 -8,-17.8 -5,-23.5 -7,0.3 -9,5.9 -12,13.2 0,6.1 0,11.4 3,16.9 7,6.3 12,6 17,6.8 10,-0.5 20,-2.3 30,-4.7 -7,4 -9,6.1 -10,8.7 25,3.8 34,-4.9 51,-7.4 -4,5.1 -9,10.4 -9,14.9 29,1.5 50,-11.6 59,-13.9 -3,4 -7,7.9 -3,10.1 12,0.2 28,-10.6 31,-13.7 10,4.8 21,12.4 34,16.8 z" id="path2" />
</g>
</svg>
</svg>
However, the external path I handle has non-centered coordinates, so it does not appear centered on the result:
Is there some way to correct this? While some manual process could be done on the external path before doing this, the inclusion of the path into the other svg is done in a script, so I should find a non-manual method to put it to the correct place.
Following enxaneta comment, I put the path in a symbol element, which I call from a use element (also added a green rectangle filling the symbol element, in order to see its borders):
<svg width="450" height="500"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="lionHead" viewBox="0 0 350 400">
<rect x="0" y="0" width="350" height="400" style="fill:green" />
<g style="fill:#fcef3c;stroke:#000000;stroke-width:3" id="main">
<path d="m 292.3,221.7 c -4,-11 -7,-22.2 -4,-35 l 8,4.1 c -6,-9.9 -9,-23 -6,-34.7 3,1.5 8,6.4 13,9.1 -6,-13.4 -3,-26.9 -3,-40.3 l -2,-8.8 7,-0.2 c -11,-12.8 -9,-32.96 -21,-42.33 l 6,-8.54 c 2,-2.69 0,-5.38 -1,-8.07 -3,-7.76 -10,-9.55 -15,-12.58 l -8,3.16 -9,8.75 c -15,-3.66 -22,-3.4 -29,-3.37 l -9,4.71 -5,6.05 -1,6.05 -21,10.09 c -1,2.13 -2,4.47 1,5.38 2,1.05 4,2.21 5,5.02 -1,2.81 -2,5.62 -1,8.43 0,3.05 1,6.05 3,8.65 23,-6 16,-8.52 25,-8.82 5,0.21 7,0.66 9,3.32 l 1,5.4 c -3,-0.6 -7,-0.2 -11,-2.5 -7,-0.6 -13,2.7 -18,6.1 -23,14.2 -70,-0.4 -28,-20.63 -29,-1.98 -46,37.83 -9,41.83 17,1.2 20,-4.2 34,-9.2 4,1.1 3,8.1 5,8.4 1,2.6 4,3.9 6,5.2 8,-0.3 14,0.4 15,3.3 1,2.1 1,3.1 -1,4 -2,3.9 -5,6.7 -9,8.7 -5,0.8 -10,0.2 -15,-0.2 -9,-5.1 -13,-10.1 -16,-15.2 -1,5.9 -1,13.1 2,16.5 -8,-0.1 -15,1.8 -22,6.1 -12,7.7 -25,19.7 -36,30.3 -8,4 -16,9.1 -26,7.6 -17,-8.6 -8,-17.8 -5,-23.5 -7,0.3 -9,5.9 -12,13.2 0,6.1 0,11.4 3,16.9 7,6.3 12,6 17,6.8 10,-0.5 20,-2.3 30,-4.7 -7,4 -9,6.1 -10,8.7 25,3.8 34,-4.9 51,-7.4 -4,5.1 -9,10.4 -9,14.9 29,1.5 50,-11.6 59,-13.9 -3,4 -7,7.9 -3,10.1 12,0.2 28,-10.6 31,-13.7 10,4.8 21,12.4 34,16.8 z" id="path2" />
</g>
</symbol>
<rect x="25" y="25" width="400" height="450" style="fill:blue;stroke-width:3;stroke:rgb(0,0,0)" />
<use x="50" y="50" xlink:href="#lionHead" width="350" height="400" /> <!-- -->
</svg>
However the path still does not center properly: what do I do wrong?
Transform the nested svg in a symbol with a viewBox attribute reflecting the bounding box of the path. Use the symbol with a use element. Since the symbol has a viewBox you can give the use element a position (x,y) and a size (width height) . Observation: it is pointless to give display:inline; to a group
<svg width="450" height="500">
<rect x="25" y="25" width="400" height="450" style="fill:blue;stroke-width:3;stroke:rgb(0,0,0)" />
<symbol viewBox="88 44 218 179" id="theSymbol">
<g style="fill:#fcef3c;stroke:#000000;stroke-width:3" id="main">
<path id="kk" d="m 292.3,221.7 c -4,-11 -7,-22.2 -4,-35 l 8,4.1 c -6,-9.9 -9,-23 -6,-34.7 3,1.5 8,6.4 13,9.1 -6,-13.4 -3,-26.9 -3,-40.3 l -2,-8.8 7,-0.2 c -11,-12.8 -9,-32.96 -21,-42.33 l 6,-8.54 c 2,-2.69 0,-5.38 -1,-8.07 -3,-7.76 -10,-9.55 -15,-12.58 l -8,3.16 -9,8.75 c -15,-3.66 -22,-3.4 -29,-3.37 l -9,4.71 -5,6.05 -1,6.05 -21,10.09 c -1,2.13 -2,4.47 1,5.38 2,1.05 4,2.21 5,5.02 -1,2.81 -2,5.62 -1,8.43 0,3.05 1,6.05 3,8.65 23,-6 16,-8.52 25,-8.82 5,0.21 7,0.66 9,3.32 l 1,5.4 c -3,-0.6 -7,-0.2 -11,-2.5 -7,-0.6 -13,2.7 -18,6.1 -23,14.2 -70,-0.4 -28,-20.63 -29,-1.98 -46,37.83 -9,41.83 17,1.2 20,-4.2 34,-9.2 4,1.1 3,8.1 5,8.4 1,2.6 4,3.9 6,5.2 8,-0.3 14,0.4 15,3.3 1,2.1 1,3.1 -1,4 -2,3.9 -5,6.7 -9,8.7 -5,0.8 -10,0.2 -15,-0.2 -9,-5.1 -13,-10.1 -16,-15.2 -1,5.9 -1,13.1 2,16.5 -8,-0.1 -15,1.8 -22,6.1 -12,7.7 -25,19.7 -36,30.3 -8,4 -16,9.1 -26,7.6 -17,-8.6 -8,-17.8 -5,-23.5 -7,0.3 -9,5.9 -12,13.2 0,6.1 0,11.4 3,16.9 7,6.3 12,6 17,6.8 10,-0.5 20,-2.3 30,-4.7 -7,4 -9,6.1 -10,8.7 25,3.8 34,-4.9 51,-7.4 -4,5.1 -9,10.4 -9,14.9 29,1.5 50,-11.6 59,-13.9 -3,4 -7,7.9 -3,10.1 12,0.2 28,-10.6 31,-13.7 10,4.8 21,12.4 34,16.8 z" id="path2" />
</g>
</symbol>
<use xlink:href="#theSymbol" x="75" y="125" width="300" height="247"/>
</svg>
I have an SVG file that was originally created in Visio. It's an electrical diagram. I want to replace one element on this diagram with another that I currently have in a separate file. Here is the original file which shows just one symbol:
And here is its code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generated by Microsoft Visio 11.0, SVG Export, v1.0 SAMPLE.svg Page-1 -->
<svg
xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/"
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="8.5in"
height="11in"
viewBox="0 0 612 792"
xml:space="preserve"
color-interpolation-filters="sRGB"
class="st6"
version="1.1"
id="svg678"
sodipodi:docname="SAMPLE1.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
id="metadata684"><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="defs682" /><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="1022"
id="namedview680"
showgrid="false"
inkscape:zoom="2"
inkscape:cx="408"
inkscape:cy="795.24519"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="g676" />
<v:documentProperties
v:langID="1033"
v:viewMarkup="false">
<v:userDefs>
<v:ud
v:nameU="msvNoAutoConnect"
v:val="VT0(1):26" />
</v:userDefs>
</v:documentProperties>
<style
type="text/css"
id="style348">
<![CDATA[
.st1 {stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.25}
.st2 {stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}
.st3 {fill:#ffffff;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}
.st4 {fill:#000000;font-family:Calibri;font-size:0.499992em}
.st5 {fill:#ffffff}
.st6 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}
]]>
</style>
<g
v:mID="0"
v:index="1"
v:groupContext="foregroundPage"
id="g676">
<title
id="title350">Page-1</title>
<v:pageProperties
v:drawingScale="1"
v:pageScale="1"
v:drawingUnits="0"
v:shadowOffsetX="9"
v:shadowOffsetY="-9" />
<v:layer
v:name="Connector"
v:index="0" />
<v:layer
v:name="Electrical"
v:index="1" />
<g
id="group7-18"
transform="translate(84.24,-648.054)"
v:mID="7"
v:groupContext="group"
v:layerMember="1">
<v:custProps>
<v:cp
v:nameU="SubType"
v:lbl="Switch type"
v:type="1"
v:format="Mushroom Head;Push-Pull Head;Normal"
v:langID="1033"
v:val="VT4(Normal)" />
</v:custProps>
<v:userDefs>
<v:ud
v:nameU="visDescription"
v:val="VT4(Circuit closing (make). Right-click for mushroom head, push-pull head.)" />
<v:ud
v:nameU="visVersion"
v:val="VT0(14):26" />
</v:userDefs>
<title
id="title385">Pushbutton make</title>
<desc
id="desc387">START</desc>
<g
id="shape8-19"
v:mID="8"
v:groupContext="shape"
v:layerMember="1"
transform="translate(11.97,-17.5061)">
<title
id="title389">Sheet.8</title>
</g>
<g
id="shape9-21"
v:mID="9"
v:groupContext="shape"
v:layerMember="1"
transform="translate(0,1.34663)">
<title
id="title392">Sheet.9</title>
<path
d="M23.94 790.65 A1.49625 1.34662 0 1 1 26.93 790.65 A1.49625 1.34662 0 1 1 23.94 790.65 ZM8.98 790.65 A1.49625 1.34662 0 1 1 11.97 790.65 A1.49625 1.34662 0 1 1 8.98 790.65 Z"
class="st5"
id="path394" />
<path
d="M10.47 786.61 L25.44 786.61"
class="st2"
id="path396" />
<path
d="M17.96 769.11 L17.96 786.61"
class="st2"
id="path398" />
<path
d="M23.94 790.65 A1.49625 1.34662 0 1 1 26.93 790.65 A1.49625 1.34662 0 1 1 23.94 790.65"
class="st2"
id="path400" />
<path
d="M8.98 790.65 A1.49625 1.34662 0 1 1 11.97 790.65 A1.49625 1.34662 0 1 1 8.98 790.65"
class="st2"
id="path402" />
<path
d="M35.91 790.65 L26.93 790.65"
class="st2"
id="path404" />
<path
d="M0 790.65 L8.98 790.65"
class="st2"
id="path406" />
</g>
<g
id="shape7-29"
v:mID="7"
v:groupContext="groupContent"
v:layerMember="1">
<v:textBlock
v:margins="rect(1,1,1,1)"
v:verticalAlign="0" />
<v:textRect
cx="17.955"
cy="796.602"
width="18.7"
height="9.20349" />
<text
x="10.29"
y="798.4"
class="st4"
v:langID="1033"
id="text409"><v:paragraph
v:horizAlign="1" /><v:tabList />START</text>
</g>
</g>
</g>
</svg>
And here is another to replace with:
And here is its code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/"
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="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg8"
inkscape:version="0.92.3 (2405546, 2018-03-11)"
sodipodi:docname="PushButtonBreak.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2"
inkscape:cx="400"
inkscape:cy="560"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1022"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<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></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="group11-31"
transform="matrix(0.35277777,0,0,0.35277777,100.54167,-119.40724)"
v:mID="11"
v:groupContext="group"
v:layerMember="1">
<v:custProps>
<v:cp
v:nameU="SubType"
v:lbl="Switch type"
v:type="1"
v:format="Mushroom Head;Push-Pull Head;Normal"
v:langID="1033"
v:val="VT4(Normal)" />
</v:custProps>
<v:userDefs>
<v:ud
v:nameU="visDescription"
v:val="VT4(Circuit opening (break). Right-click for mushroom head, push-pull head.)" />
<v:ud
v:nameU="visVersion"
v:val="VT0(14):26" />
</v:userDefs>
<title
id="title413">Pushbutton break</title>
<desc
id="desc415">STOP</desc>
<g
id="shape12-32"
v:mID="12"
v:groupContext="shape"
v:layerMember="1"
transform="translate(12,-17.55)">
<title
id="title417">Sheet.12</title>
</g>
<g
id="shape13-34"
v:mID="13"
v:groupContext="shape"
v:layerMember="1"
transform="translate(0,1.35)">
<title
id="title420">Sheet.13</title>
<path
d="m 24,790.65 a 1.5,1.35 0 1 1 3,0 1.5,1.35 0 1 1 -3,0 z m -15,0 a 1.5,1.35 0 1 1 3,0 1.5,1.35 0 1 1 -3,0 z"
class="st5"
id="path422"
inkscape:connector-curvature="0"
style="fill:#ffffff" />
<path
d="M 0,790.65 H 9"
class="st2"
id="path424"
inkscape:connector-curvature="0"
style="stroke:#000000;stroke-width:0.23999999;stroke-linecap:round;stroke-linejoin:round" />
<path
d="M 36,790.65 H 27"
class="st2"
id="path426"
inkscape:connector-curvature="0"
style="stroke:#000000;stroke-width:0.23999999;stroke-linecap:round;stroke-linejoin:round" />
<path
d="m 10.5,792 h 15"
class="st2"
id="path428"
inkscape:connector-curvature="0"
style="stroke:#000000;stroke-width:0.23999999;stroke-linecap:round;stroke-linejoin:round" />
<path
d="M 18,769.05 V 792"
class="st2"
id="path430"
inkscape:connector-curvature="0"
style="stroke:#000000;stroke-width:0.23999999;stroke-linecap:round;stroke-linejoin:round" />
<path
d="m 24,790.65 a 1.5,1.35 0 1 1 3,0 1.5,1.35 0 1 1 -3,0"
class="st2"
id="path432"
inkscape:connector-curvature="0"
style="stroke:#000000;stroke-width:0.23999999;stroke-linecap:round;stroke-linejoin:round" />
<path
d="m 9,790.65 a 1.5,1.35 0 1 1 3,0 1.5,1.35 0 1 1 -3,0"
class="st2"
id="path434"
inkscape:connector-curvature="0"
style="stroke:#000000;stroke-width:0.23999999;stroke-linecap:round;stroke-linejoin:round" />
</g>
<g
id="shape11-42"
v:mID="11"
v:groupContext="groupContent"
v:layerMember="1">
<v:textBlock
v:margins="rect(1,1,1,1)"
v:verticalAlign="0" />
<v:textRect
cx="18"
cy="796.602"
width="16.12"
height="9.20349" />
<text
x="11.62"
y="798.40002"
class="st4"
v:langID="1033"
id="text437"
style="font-size:5.99990416px;font-family:Calibri;fill:#000000"><v:paragraph
v:horizAlign="1" />
<v:tabList />
STOP</text>
</g>
</g>
</g>
</svg>
I want to know what the appropriate strategy for swapping elements is. Can that be done in pure javascript/jQuery or I need additional libraries?
Thanks for help.
Matching dimensions is a process that SVG has a lot of facilities for. Unfortunately, your files do not use them properly, so a lot of things can go wrong when you copy and paste: wrong positioning of text, wrong text size, wrong line widths, height/width distortions.
There is really no maintainable way around re-engineering the whole thing. You are in luck I have the time. Here is what I would do. It uses the SVG <symbol> element to define reusable templates. Although I have no idea whether Visio can work with them, I've tried to maintain its markup.
For your end result, add attribute xmlns:xlink="http://www.w3.org/1999/xlink" to your complete diagram file. Then copy the <style>, <symbol> elements as its immediate childs. If there already is a <style> in your file, note that they will interact. Be careful with the names of classes, you might need to rename some of them to avoid conflicts.
Look in the markup for
<title>Pushbutton make</title>
elements, and replace their parent <g> element with the <use> element, and, as a first attempt, exchange the transform attribute with that that was part of the <g>. That in no way guarantees that the symbol will now be in the right place, but now you can move the <use> element around by changing the transform attribute until it fits. (You can also use for example Inkscape as an UI for that.)
To exchange the rendered symbol, all you need now is to change the xlink:href attribute to reference either make or break state. The script gives an example how to do that.
var state = true;
setInterval(function () {
state = !state;
var id = "#Pushbutton." + (state ? 'make' : 'break');
document.querySelector('#button1').setAttribute('xlink:href', id);
}, 2000);
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="st6">
<v:documentProperties v:viewMarkup="false" v:langID="1033">
<v:userDefs>
<v:ud v:val="VT0(1):26" v:nameU="msvNoAutoConnect" />
</v:userDefs>
</v:documentProperties>
<style>
<![CDATA[
.st1 {stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.25}
.st2 {stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}
.st3 {fill:#ffffff;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}
.st4 {fill:#000000;font-family:Calibri;font-size:0.5em;text-anchor:middle}
.st5 {fill:#ffffff}
.st6 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}
.st7 {fill:#000000;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}
]]>
</style>
<symbol id="Pushbutton.make" viewBox="0 0 36 30">
<v:custProps><v:cp v:val="VT4(Normal)" v:langID="1033" v:format="Mushroom Head;Push-Pull Head;Normal" v:type="1" v:lbl="Switch type" v:nameU="SubType" /></v:custProps><v:userDefs>
<v:ud v:val="VT4(Circuit closing (make). Right-click for mushroom head, push-pull head.)" v:nameU="visDescription" />
<v:ud v:val="VT0(14):26" v:nameU="visVersion" /></v:userDefs>
<title>Pushbutton make</title>
<desc>START</desc>
<g>
<title>Sheet.8</title>
</g>
<g>
<title>Sheet.9</title>
<path class="st2" d="M 10.5,17.5 H 25.5" />
<path class="st2" d="M 18,0 V 17.5" />
<path class="st3" d="M 24,21.5 A 1.5,1.5 0 1 1 27,21.5 1.5,1.5 0 1 1 24,21.5 Z" />
<path class="st3" d="M 9,21.5 A 1.5,1.5 0 1 1 12,21.5 1.5,1.5 0 1 1 9,21.5 Z" />
<path class="st2" d="M 36,21.5 H 27" />
<path class="st2" d="M 0,21.5 H 9" />
</g>
<g>
<v:textBlock v:verticalAlign="0" v:margins="rect(1,1,1,1)" />
<v:textRect height="9.2" width="18.7" cy="26.1" cx="18" />
<text class="st4" y="28" x="18">
<v:paragraph v:horizAlign="0" />
<v:tabList />START</text>
</g>
</symbol>
<symbol id="Pushbutton.break" viewBox="0 0 36 30">
<v:custProps><v:cp v:val="VT4(Normal)" v:langID="1033" v:format="Mushroom Head;Push-Pull Head;Normal" v:type="1" v:lbl="Switch type" v:nameU="SubType" /></v:custProps><v:userDefs>
<v:ud v:val="VT4(Circuit closing (make). Right-click for mushroom head, push-pull head.)" v:nameU="visDescription" />
<v:ud v:val="VT0(14):26" v:nameU="visVersion" /></v:userDefs>
<title>Pushbutton break</title>
<desc>STOP</desc>
<g>
<title>Sheet.8</title>
</g>
<g>
<title>Sheet.9</title>
<path class="st2" d="M 10.5,23 H 25.5" />
<path class="st2" d="M 18,0 V 23" />
<path class="st7" d="M 24,21.5 A 1.5,1.5 0 1 1 27,21.5 1.5,1.5 0 1 1 24,21.5 Z" />
<path class="st7" d="M 9,21.5 A 1.5,1.5 0 1 1 12,21.5 1.5,1.5 0 1 1 9,21.5 Z" />
<path class="st2" d="M 36,21.5 H 27" />
<path class="st2" d="M 0,21.5 H 9" />
</g>
<g>
<v:textBlock v:verticalAlign="0" v:margins="rect(1,1,1,1)" />
<v:textRect height="9.2" width="17.2" cy="26.1" cx="18" />
<text class="st4" y="28" x="18">
<v:paragraph v:horizAlign="0" />
<v:tabList />STOP</text>
</g>
</symbol>
<g>
<title>Page-1</title>
<v:pageProperties v:shadowOffsetY="-9" v:shadowOffsetX="9" v:drawingUnits="0" v:pageScale="1" v:drawingScale="1" />
<v:layer v:index="0" v:name="Connector" />
<v:layer v:index="1" v:name="Electrical" />
<use id="button1" xlink:href="#Pushbutton.break" width="36" height="30" transform="translate(50 50) scale (3)" />
</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.