I have the following svg, with an arrow. For some reason, it does not show up in Firefox.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg5"
inkscape:version="1.1 (1:1.1+202105261517+ce6663b3b7)"
sodipodi:docname="test.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="0.92648709"
inkscape:cx="382.08843"
inkscape:cy="460.88068"
inkscape:window-width="1920"
inkscape:window-height="1143"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs2">
<marker
style="overflow:visible;"
id="Arrow2Lend"
refX="0.0"
refY="0.0"
orient="auto"
inkscape:stockid="Arrow2Lend"
inkscape:isstock="true">
<path
transform="scale(1.1) rotate(180) translate(1,0)"
d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
style="fill-rule:evenodd;fill:context-stroke;stroke-width:0.62500000;stroke-linejoin:round;"
id="path899" />
</marker>
<marker
style="overflow:visible"
id="Arrow1Lstart"
refX="0.0"
refY="0.0"
orient="auto"
inkscape:stockid="Arrow1Lstart"
inkscape:isstock="true">
<path
transform="scale(0.8) translate(12.5,0)"
style="fill-rule:evenodd;fill:context-stroke;stroke:context-stroke;stroke-width:1.0pt"
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
id="path878" />
</marker>
</defs>
<g
inkscape:label="Lager 1"
inkscape:groupmode="layer"
id="layer1">
<path
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Lend)"
d="M 33.740293,27.950213 102.27875,62.019309 49.732599,111.80037"
id="path876" />
</g>
</svg>
Is the SVG bad (bug in inkscape), or is there a problem with Firefox?
Embedding using img or viewing the file directly has no impact on the result.
On Firefox 91.0.2
As #MichaelMullany has pointed out:
If you delete fill:context-stroke from the style string, or replace it by fill:#000 (or using the hex code for your color of choice), Firefox should be able to display the arrowhead correctly.
Related
Must be something very trivial, but I'm unable to figure out why the line is not being drawn between the two points (represented by circles).
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="-10 -10 80 90"
width="400" height="400" version="1.1">
<path d="M 0 31.5 V 0,72" fill="none" id="bust" stroke="black"/>
<circle cx="0" cy="31.5" r="5"/>
<circle cx="0" cy="72" r="5"/>
</svg>
Output in Firefox
As Robert Longson points out, I only need single value after V.
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="-10 -10 80 90"
width="400" height="400" version="1.1">
<path d="M 0 31.5 V 72" fill="none" id="bust" stroke="black"/>
<circle cx="0" cy="31.5" r="5"/>
<circle cx="0" cy="72" r="5"/>
</svg>
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
i have an svg graphic but wanted to mirror it without changing the coordinates of the line/stroke but swap the position of the arrowhead and circle… is there a more efficient way of doing this? one thing that i thought about is changing the angle of each arrowhead and circle but is tedious to do. another suggestion is using transform matrix. does anybody know how to do this? thanks in advance.
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="2000" height="2000" xmlns="http://www.w3.org/2000/svg">
<g>
<path fill="none" stroke="#4caf50" stroke-width="2" stroke-miterlimit="10" d="M195.2,75.3c28-11.5,60.9-18.1,96-18.1 c78.4,0,145.6,32.9,173.1,79.4" />
<g fill="#4caf50" id="test">
<polygon class="one" points="201.6,79 202.1,77.7 195.7,75.1 198.8,68.9 197.5,68.3 193.8,75.9"/>
<path class="two" d="M461.6,138.1c0.8,1.4,2.7,1.9,4.1,1.1s1.9-2.7,1.1-4.1c-0.8-1.4-2.7-1.9-4.1-1.1 C461.3,134.8,460.8,136.6,461.6,138.1z"/>
</g>
</g>
</svg>
This can be solved with the help of SVG markers. MDN and W3C
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="2000" height="2000" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow1" viewBox="0 0 20 20" refX="0" refY="10"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<polyline id="markerPoly1" points="0,0 20,10 0,20 2,10" fill="#4caf50" />
</marker>
<marker id="circle1" viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="userSpaceOnUse"
markerWidth="10" markerHeight="10">
<circle cx="5" cy="5" r="5" fill="#4caf50"" />
</marker>
</defs
<g>
<path fill="none" stroke="#4caf50" stroke-width="2" stroke-miterlimit="10" d="M195.2,75.3c28-11.5,60.9-18.1,96-18.1 c78.4,0,145.6,32.9,173.1,79.4" style=" marker-start: url(#circle1); marker-end: url(#arrow1);
fill:none; stroke:green; stroke-width:2; " />
</svg>
Update
The angle of the marker can be changed using the attribute orient = ("180").
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="2000" height="2000" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrowLeft" viewBox="0 0 20 20" refX="0" refY="10"
markerUnits="userSpaceOnUse" orient="170"
markerWidth="20" markerHeight="20">
<polyline id="markerPoly1" points="0,0 20,10 0,20 2,10" fill="#4caf50" />
</marker>
<marker id="arrowRight" viewBox="0 0 20 20" refX="0" refY="10"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="20" markerHeight="20">
<polyline id="markerPoly1" points="0,0 20,10 0,20 2,10" fill="#4caf50" />
</marker>
<marker id="circle1" viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="10" markerHeight="10">
<circle cx="5" cy="5" r="5" fill="#4caf50" />
</marker>
</defs>
<path id="path1" fill="none" stroke="#4caf50" stroke-width="2" stroke-miterlimit="10" d="M195.2,75.3c28-11.5,60.9-18.1,96-18.1 c78.4,0,145.6,32.9,173.1,79.4" style=" marker-end: url(#arrowRight); marker-start: url(#circle1);
fill:none; stroke:green; stroke-width:2; " />
<g transform="translate(0 100)" >
<path id="path1" fill="none" stroke="#4caf50" stroke-width="2" stroke-miterlimit="10" d="M195.2,75.3c28-11.5,60.9-18.1,96-18.1 c78.4,0,145.6,32.9,173.1,79.4" style=" marker-end: url(#circle1); marker-start: url(#arrowLeft);
fill:none; stroke:green; stroke-width:2; " />
</g>
</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>
Just playing the defs and use for the first time. What I would like to do is use defs to build a base template and then when I use it customise it by adding some more inner tags.
Is this possible, as when I try to do it in Firefox it doesn't render any tags which I place as children to the use tag. e.g:
<?xml version="1.0" standalone="no"?>
<svg width="10000px" height="5500px" version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="storyCard">
<rect width="800px" height="500px" fill="#ffff00" />
<path d="M 20 120 L 780 120 M 640 20 L 640 120" stroke-width="6px" stroke="black" fill="none" />
</g>
</defs>
<!-- White Board -->
<path d="M 0 0 L 10000 0 L 10000 550 L 0 5500 z M 2000 0 L 2000 5500" stroke-width="20px" stroke="black" fill="none" />
<use xlink:href="#storyCard" transform="translate(100,100)" />
<use xlink:href="#storyCard" transform="translate(1000,200)" >
<text x="20" y="80" font-size="45" font-weight="bold" font-family="Comic Sans MS, cursive">
My Dummy Story
</text>
</use>
</svg>
It isn't directly possible with use. The use element can contain description and animation elements, but it doesn't behave like an XBL container.
You could use XBL, if you're targeting firefox.
To stay within SVG, make a group and use the background:
<g transform="translate(1000,200)" >
<use xlink:href="#storyCard"/>
<text x="20" y="80" font-size="45" font-weight="bold" font-family="Comic Sans MS, cursive">
My Dummy Story
</text>
</g>