I've looked around for about an hour only to resort to SO; I found https://css-tricks.com/svg-shape-morphing-works/ . This tutorial says "create two svg's with same amount of points" and then randomly jumps to:
<svg viewBox="0 0 194.6 185.1">
<polygon fill="#FFD41D" points=" ... shape 1 points ... ">
</polygon>
</svg>
There are no references to either of the SVG images after creation. The tutorial doesn't explain whats going on... or what to do with the images I created - I'm assuming these "points" are some sort of co-ordinate system that plot out the image, and the value for the viewbox attribute seem random - .
I looked at other solutions such as GreenSocks svgmorphing tool but for the task of morphing two 40px images together it seemed over-complicated having to go through learning all the syntax ect.
( The two images are located at:
http://tobi.freetzi.com/arr.svg and
http://tobi.freetzi.com/add.svg
)
The two paths that you are morphing between have to have the same number and type of path commands. Path commands are the single letters that appear in your path definition d="". You can read more about them in the SVG spec.
In your first SVG (arr.svg) there are X commands:
arr.svg add.svg
-------------- --------------
M12.222,13.293 M29.000,22.000
L7.000,13.000 L22.000,22.000
L17.172,23.899 L22.000,29.000
L17.172,23.899 L18.000,33.000
L20.000,26.728 L18.000,22.000
L20.000,26.728 L7.000,22.000
L20.000,26.728 L10.000,18.000
L22.828,23.899 L18.000,18.000
L22.828,23.899 L18.000,10.000
L33.000,13.000 L22.000,7.000
L27.778,13.293 L22.000,18.000
L20.000,21.071 L32.000,18.000
L14.343,15.414 L29.000,22.000
Z
Your two SVGs almost match. If you add a 'Z' to the first one, you should be able to animate them.
<svg viewBox="0 0 121.5 60.834">
<path d="">
<animate attributeName="d" dur="2s" repeatCount="indefinite"
keyTimes="0;0.5;1"
values="M12.222,13.293 L7.000,13.000 L17.172,23.899 L17.172,23.899 L20.000,26.728 L20.000,26.728 L20.000,26.728 L22.828,23.899 L22.828,23.899 L33.000,13.000 L27.778,13.293 L20.000,21.071 L14.343,15.414 Z;
M29.000,22.000 L22.000,22.000 L22.000,29.000 L18.000,33.000 L18.000,22.000 L7.000,22.000 L10.000,18.000 L18.000,18.000 L18.000,10.000 L22.000,7.000 L22.000,18.000 L32.000,18.000 L29.000,22.000 Z;
M12.222,13.293 L7.000,13.000 L17.172,23.899 L17.172,23.899 L20.000,26.728 L20.000,26.728 L20.000,26.728 L22.828,23.899 L22.828,23.899 L33.000,13.000 L27.778,13.293 L20.000,21.071 L14.343,15.414 Z"/>
</path>
</svg>
Related
I want to create an animation in which an object (in this case, the first blue line in the image https://i.stack.imgur.com/RDwQ2.png) move along an svg path. The line is provided in the form of PNG.
I tried using the tag but it's not changing anything.
Here is basically an example of what I wanted animate image on SVG Path.
Below is my code.
<svg height="238.158mm" viewbox="0 0 1920 900" width="508.071mm" xmlns="http://www.w3.org/2000/svg">
<path class="green-line" d="M 1.09,741.82
C 1.09,741.82 17.09,734.00 17.09,734.00
17.09,734.00 51.45,718.73 51.45,718.73
51.45,718.73 74.55,709.09 74.55,709.09
74.55,709.09 110.91,694.73 110.91,694.73
110.91,694.73 157.45,678.18 157.45,678.18
157.45,678.18 199.82,665.27 199.82,665.27
199.82,665.27 253.82,650.55 253.82,650.55
253.82,650.55 312.67,638.00 312.67,638.00
312.67,638.00 387.67,627.33 387.67,627.33
387.67,627.33 453.33,621.00 453.33,621.00
453.33,621.00 505.33,618.67 505.33,618.67
505.33,618.67 576.67,620.33 576.67,620.33
576.67,620.33 619.33,623.67 619.33,623.67
619.33,623.67 636.67,625.00 636.67,625.00
636.67,625.00 715.67,636.33 716.00,636.33
716.33,636.33 783.00,648.33 783.00,648.33
783.00,648.33 846.67,665.00 846.67,665.00
846.67,665.00 895.33,679.00 895.33,679.00
895.33,679.00 951.33,697.67 951.33,697.67
951.33,697.67 1026.00,723.33 1026.00,723.33
1026.00,723.33 1097.33,747.67 1097.33,747.67
1097.33,747.67 1176.67,776.00 1176.67,776.00
1176.67,776.00 1236.67,798.00 1236.67,798.00
1236.67,798.00 1265.00,807.67 1265.00,807.67
1265.00,807.67 1316.00,826.55 1316.00,826.55
1316.00,826.55 1351.64,837.27 1351.64,837.27
1351.64,837.27 1389.09,847.82 1389.09,847.82
1389.09,847.82 1429.45,858.36 1429.45,858.36
1429.45,858.36 1452.91,863.82 1452.91,863.82
1452.91,863.82 1470.81,868.06 1470.81,868.06
1470.81,868.06 1489.88,872.06 1489.88,872.06
1489.88,872.06 1503.88,874.25 1503.88,874.25
1503.88,874.25 1513.50,875.94 1513.50,875.94
1513.50,875.94 1533.44,879.31 1533.44,879.31
1533.44,879.31 1546.38,881.56 1546.38,881.56
1546.38,881.56 1556.19,883.00 1556.19,883.00
1556.19,883.00 1566.19,884.19 1566.19,884.19
1566.19,884.19 1596.69,887.69 1596.69,887.69
1596.69,887.69 1614.12,889.88 1614.12,889.88
1614.12,889.88 1633.06,891.12 1633.06,891.12
1633.06,891.12 1645.25,892.25 1645.25,892.25
1645.25,892.25 1682.62,895.06 1682.62,895.06
1682.62,895.06 1693.31,896.12 1693.31,896.12
1693.31,896.12 1707.22,897.04 1707.22,897.04
1707.22,897.04 1723.17,897.78 1723.17,897.78
1723.17,897.78 1729.09,898.22 1729.09,898.22
1729.09,898.22 1763.43,899.22 1763.43,899.22
1763.43,899.22 1768.74,899.48 1768.78,899.48
1768.83,899.48 1774.59,899.56 1774.59,899.56
1774.59,899.56 1778.34,899.88 1778.34,899.88
1778.34,899.88 1779.50,899.97 1779.50,899.97
1779.50,899.97 1793.39,899.91 1793.39,899.91
1793.39,899.91 1807.48,899.96 1807.48,899.96
1807.48,899.96 1817.13,900.00 1817.13,900.00
1817.13,900.00 1822.35,899.83 1822.43,899.87
1822.52,899.91 1884.73,899.91 1884.73,899.91
1884.73,899.91 1897.73,899.91 1897.73,899.91
1897.73,899.91 1918.64,900.27 1918.64,900.27
1918.64,900.27 1919.62,900.00 1919.62,900.00" id="animatePath" style="fill:none;stroke:none ;stroke-miterlimit:10;">
</path>
<image height="250px" id="car" width="1918px" x="0" xlink:href="/data/cms/images/1668585137_img-top-panel-curve.png" y="500">
<animatemotion begin="0s" dur="20s" repeatcount="indefinite" restart="whenNotActive" xlink:href="#car">
<mpath xlink:href="#animatePath">
</mpath>
</animatemotion>
</image>
</svg>
</div>
I'm struggling to make an animation work. I've created two SVG shapes in Illustrator with the same amount of path points. Now i want to code a morphing animation. My first try was an animate object as suggested here:
<span class="svgspan">
<svg class="svg1" 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 398 369.4"
style="enable-background:new 0 0 398 369.4;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #FFFFFF;
}
</style>
<path id="pfad" class="st0" d="M398 184.7c0 51-20.7 97.2-54.1 130.6s-79.6 54.1-130.6 54.1s-97.2-20.7-130.6-54.1s-54.1-79.6-54.1-130.6
S49.3 87.5 82.7 54.1S162.3 0 213.3 0s97.2 20.7 130.6 54.1S398 133.7 398 184.7z">
<animate id="trs" begin="500ms" fill="freeze" attributename="d" dur="2s" from ="M398,184.7c0,51-20.7,97.2-54.1,130.6s-79.6,54.1-130.6,54.1s-97.2-20.7-130.6-54.1s-54.1-79.6-54.1-130.6
S49.3 87.5 82.7 54.1S162.3 0 213.3 0s97.2 20.7 130.6 54.1S398 133.7 398 184.7z" to="M195 369.4c-48.4-78-140.4-118.3-182.3-200.3C-3.8 131.7-6.1 85 17.2 50C57.9-16 157.7-15.8 199.1 49.4
c32.3-51.6 107.8-65.7 155.7-27.5c54.5 39.2 53.8 119.8 15.8 170.4c-49 65.4-124.1 107-167.6 177.1H195z"></path>
</svg></span>
I got an animation, but it didn't morph but instantly switch to the second path.
My next approach was a css animation like this:
#pfad {
d: path('M195,369.4c-48.4-78-140.4-118.3-182.3-200.3C-3.8,131.7-6.1,85,17.2,50C57.9-16,157.7-15.8,199.1,49.4c32.3-51.6,107.8-65.7,155.7-27.5c54.5,39.2,53.8,119.8,15.8,170.4c-49,65.4-124.1,107-167.6,177.1H195z');
transition: 1s;
}
This didn't work either. I even got an 'Unknown property: d' error in VS Code and Chrome:
It would be nice if someone could help me get this working.
Edit: The anchor points are in the right position now i guess, but i still have the same problem. New anchor points:
<path id="pfad" class="st0" d="M199,369.4c-57.6-0.5-110.6-27.4-144.1-69.2c-25.4-31.6-40.6-71.8-40.6-115.5C14.3,82.7,97,0,199,0
s184.7,82.7,184.7,184.7c0,33.7-9,65.3-24.8,92.5C326.9,332.3,267.3,369.4,199,369.4C198.4,369.4,199.6,369.4,199,369.4z">
<animate id="trs" begin="500ms" fill="freeze" attributename="d" dur="2s" from ="M199,369.4c-57.6-0.5-110.6-27.4-144.1-69.2c-25.4-31.6-40.6-71.8-40.6-115.5C14.3,82.7,97,0,199,0
s184.7,82.7,184.7,184.7c0,33.7-9,65.3-24.8,92.5C326.9,332.3,267.3,369.4,199,369.4C198.4,369.4,199.6,369.4,199,369.4z" to="M199,369.4C150.6,291.4,54.8,251,12.9,169C-3.6,131.6-5.9,84.9,17.4,49.9c40.7-66,140.5-65.8,181.9-0.6
C231.6-2.3,307.1-16.4,355,21.8c54.5,39.2,53.8,119.8,15.8,170.4C321.8,257.6,242.5,299.3,199,369.4L199,369.4z"></path>```
Like the comments suggest, it is a good idea to be precise with the point in the path. So, your code is ok. It is just the path that need a helping hand.
I copied your path to Inkscape and make the two shapes there.
path {
fill: red;
}
<span class="svgspan">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="200" height="200">
<path id="pfad" class="st0"
d="M 500,1000 C 220,1000 0,780 0,500 0,220 220,0 500,0 c 280,0 500,220 500,500 0,280 -220,500 -500,500 z">
<animate id="trs" begin="1s" fill="freeze" attributename="d" dur="2s"
from ="M 500,1000 C 220,1000 0,780 0,500 0,220 220,0 500,0 c 280,0 500,220 500,500 0,280 -220,500 -500,500 z"
to="M 500,1000 C 420,820 0,600 0,300 0,0 380,-120 500,150 620,-120 1000,0 1000,300 c 0,300 -420,520 -500,700 z" />
</path>
</svg>
</span>
The main condition for the implementation of smooth animation path changes
using the attribute d are:
Equal number of nodes in both shapes
Exact match of the node type (A; C; Q), respectively, for each point in the initial and final position of the path
These conditions can be met in different ways, but it is better to do this in the vector editor.
You must have the same number of node points by the heart and the circle
Below is a screenshot from Inkscape. Drag matching points from the outline of the heart to the outline of the circle
#chrwahl did this work in his answer while solving this problem
All credits to #chrwahl for a job well done
#jayjay9601 comments
I'll definitely try that even though i would prefer the html/css-only
version
Below is the complete CSS animation code using the d attribute:
.svgspan {
width:30vw;
height:30vh;
}
#pfad{
fill: crimson;
transition: all 1s ease-in-out;
}
#pfad:hover {
d: path("M 500,1000 C 420,820 0,600 0,300 0,0 380,-120 500,150 620,-120 1000,0 1000,300 c 0,300 -420,520 -500,700 z");
fill: red;
}
<div class="svgspan">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" >
<path id="pfad" class="st0"
d="M 500,1000 C 220,1000 0,780 0,500 0,220 220,0 500,0 c 280,0 500,220 500,500 0,280 -220,500 -500,500 z">
</path>
</svg>
</div>
I need to create some alphabets (AEGLNRUTSZ) using svg path.
Q. Is there any tool or technique available? I spent all day, playing with code but it seems very complex and don't make any sense. :(
Here's the example snippet, it draws letter D
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M28.2371517,0.75 C32.7510836,1.7 36.0111455,3.55 39.371517,7.05 C42.4309598,10.25 44.3368421,13.9 45.1393189,18 C45.7913313,21.45 45.7913313,58.55 45.1393189,62.05 C43.4340557,71.15 35.6600619,78.25 26.0303406,79.5 C24.0241486,79.75 17.3034056,80 11.1845201,80 L-7.10542736e-15,80 L-7.10542736e-15,1.42108547e-14 L12.4383901,1.42108547e-14 C21.2656347,1.42108547e-14 25.7795666,0.2 28.2371517,0.75 Z M14.5448916,40 L14.5448916,65.6 L19.7108359,65.4 C24.174613,65.25 25.1275542,65.05 27.1337461,63.9 C31.0458204,61.6 31.0959752,61.45 31.0959752,39.7 C31.0959752,18.5 31.0959752,18.5 27.4346749,16.1 C25.6291022,14.9 24.8767802,14.75 19.9616099,14.55 L14.5448916,14.4 L14.5448916,40 Z" fill="
From this link, I generate a SVG file from a Postscript (itself made by latex) :
inkscape example.ps --export-plain-svg example.svg
example.ps comes from example.tex below :
\begin{document}
\begin{pspicture}(-4,-2.5)(6,2.5)
\rput(-4,1.5){light\,(1\,:\,yes,\,0\,:\,no)}
\rput(-4,-0.5){noise\,(1\,:\,yes,\,0\,:\,no)}
\rput(5,1.5){eyes\,(0\,:\,closed,\,1\,:\,opened)}
\rput(5,-0.5){voice\,(00\,:\,snore,\,01\,:\,laugh,\,10:\,growl,\,11:\,cry)}
\rput(0,0){Robot toy module}
\psframe(-1.5,-2)(1.5,2)
\psline{->}(-1.5,1)(-4,1)
\psline{->}(-1.5,-1)(-4,-1)
\psline{->}(1.5,1)(4,1)
\psline{->}(1.5,-1)(4,-1)
\psline{-}(2.5,-1.2)(2.9,-0.8)
\rput(2.7,-1.4){2}
\psline{-}(-0.2,-2)(0,-1.7)
\psline{-}(0.2,-2)(0,-1.7)
\psline{-}(0,-2)(0,-2.4)
\rput(0,-2.6){H}
\end{pspicture}
\end{document}
Now I would like to include into a HTML page with a fine position, i.e at the top of parent container.
Unfortunately, I have troubles to adjust the parameters of position from the SVG file into HTML ; for example, I put into HTML page :
<object data="example.svg" width="700 " height="400 " type="image/svg+xml">
and "example.svg" (just created vith inkscape) contains :
viewBox="0 0 743.75 1052.5"
height="1052.5"
width="743.75"
But the result (visible on this link) is not good, since SVG is too small.
The SVG file is located on the following link.
I took width="700 " height="400 for <object> because it would be, like for a standard image into <img> tag, a fine size (and so position) for the SVG into HTML page.
Maybe this problem comes from width and height offsets for SVG "example.svg" file (seen when I visualize it directly in browser : check here )
I tried to set 700 and 400 in viewBox and also for height width :
viewBox="0 0 700 400"
height="400"
width="700"
The result is visible here. For width, it may be acceptable but I have still this large vertical offset (I mean blank space) with the top "title" ("Coding > Robot module").
Is there a general rule to apply for positioning a SVG file without offset. (or at least with a small offset like with an image).
PS: I would like to keep the <object> tag to include the SVG into HTML.
The problem is that the SVG generated by LaTeX is for the whole page, and the viewBox it sets represents the page.
To get the diagram in the middle of the page to scale and fit whatever size you want it to, you need to update the viewBox so that it reflexts the bounding box of (just) your diagram.
So it turns out that the appropriate viewBox to use is approximately:
viewBox="134 174 489 168"
If you set it to that (and update your width and height) you will end up with an SVG that behaves as you want.
<?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"
viewBox="134 174 489 168"
height="168"
width="489"
xml:space="preserve"
version="1.1"
id="svg2"><metadata
id="metadata8"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs6" /><g
transform="matrix(1.25,0,0,-1.25,0,1052.5)"
id="g10"><g
transform="scale(0.1,0.1)"
id="g12"><g
transform="scale(10,10)"
id="g14"><text
id="text16"
style="font-variant:normal;font-weight:normal;font-size:9.96263981px;font-family:CMR10;-inkscape-font-specification:CMR10;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,108.974,686.3)"><tspan
id="tspan18"
y="0"
x="0 2.7596512 5.5193024 10.559301 15.839153 21.359074 25.199078 31.798918 36.238419 41.278271 45.718269 49.678268 53.997841 60.597839 65.037338 70.557343 75.597343">light(1:yes,0:no)</tspan><tspan
id="tspan20"
y="56.6926"
x="-0.96015602 4.559844 9.599843 12.359494 16.319492 22.319571 26.159575 32.759415 37.198917 42.238766 46.678768 50.638767 54.958336 61.678257 66.11776 71.637756 76.677757">noise(1:yes,0:no)</tspan><tspan
id="tspan22"
y="0"
x="239.63785 244.07784 249.11792 253.55791 259.07809 262.91806 269.51791 273.9574 278.3974 281.15704 286.19702 290.15704 294.59705 300.11703 304.43674 311.15668 315.47626 320.51627 326.27628 330.71631 336.23633 340.67636 346.19638">eyes(0:closed,1:opened)</tspan><tspan
id="tspan24"
y="56.6926"
x="200.39804 205.43788 210.47787 213.23752 217.67751 223.67735 227.51735 232.55736 239.15742 243.59691 247.55693 253.07692 258.11691 262.07693 266.51691 270.8364 275.8764 282.35632 286.79581 289.55545 294.59546 300.11545 305.15546 310.67545 315.11502 320.15503 325.19504 329.51471 334.55472 338.51471 343.31473 350.51474 353.27438 357.47418 362.51419 367.5542 371.87387 376.31387 380.27386 385.55386">voice(00:snore,01:laugh,10:growl,11:cry)</tspan><tspan
id="tspan26"
y="42.5196"
x="113.50584 120.82584 125.86586 131.62576 136.66576 143.74568 147.58568 152.38553 160.90544 169.18546 174.46559 179.98558 185.50557 188.26523">Robottoymodule</tspan></text>
</g><path
id="path28"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 2199.59,6461.8 0,562.94 842.42,0 0,-1125.88 -842.42,0 0,562.94 z" /><path
id="path30"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 1530.18,6760.71 -43.24,-15.44 43.24,-15.45 -17.29,15.45" /><path
id="path32"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 2195.6,6745.27 -682.71,0" /><path
id="path34"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 1530.18,6193.78 -43.24,-15.44 43.24,-15.45 -17.29,15.45" /><path
id="path36"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 2195.6,6178.34 -682.71,0" /><path
id="path38"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 3711.42,6729.82 43.24,15.45 -43.24,15.44 17.29,-15.44" /><path
id="path40"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 3046,6745.27 682.71,0" /><path
id="path42"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 3711.42,6162.89 43.24,15.45 -43.24,15.44 17.29,-15.44" /><path
id="path44"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 3046,6178.34 682.71,0" /><path
id="path46"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 3329.46,6121.64 113.38,113.39" /><g
transform="scale(10,10)"
id="g48"><text
id="text50"
style="font-variant:normal;font-weight:normal;font-size:9.96263981px;font-family:CMR10;-inkscape-font-specification:CMR10;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,336.095,603.375)"><tspan
id="tspan52"
y="0"
x="0">2</tspan></text>
</g><path
id="path54"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 2564.11,5894.87 56.69,85.04" /><path
id="path56"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 2677.49,5894.87 -56.69,85.04" /><path
id="path58"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 2620.8,5894.87 0,-113.38" /><g
transform="scale(10,10)"
id="g60"><text
id="text62"
style="font-variant:normal;font-weight:normal;font-size:9.96263981px;font-family:CMR10;-inkscape-font-specification:CMR10;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,258.36,569.119)"><tspan
id="tspan64"
y="0"
x="0">H</tspan><tspan
id="tspan66"
y="429.819"
x="44.7598">1</tspan></text>
</g></g></g></svg>
If you need your diagram to scale and fit its parent container. Set both width and height to "100%".
How can I add multiple layers of SVG polygons in the same SVG? For example, I have a drawing of a car (see snippet) over here, what if I want to add a window on it? If I write the new window markup below the car markup (see snippet) it is not visible. If I write it above the car markup is overwritten.
<svg heght="100" width="100">
<!--bil-->
<polygon points="0,100 0,70 5,65 20,65 30,40 70,40 80,65 95,65 100,70 100,100 90,100 80,90 70,100 30,100 20,90 10,100" style="fill:#777; stroke:#444; stroke-width:3px;">
<!--window-->
<polygon points="30,30 50,30 50,50 30,50" style="fill:blue; stroke:#444; stroke-width:3px;">
</svg>
In SVG you must terminate elements properly either with /> or a closing tag e.g. </polygon>
The html parser is parsing your current markup as nested polygons which is not allowed.
Your window's not in the right place but at least it's visible now.
<svg heght="100" width="100">
<!--bil-->
<polygon points="0,100 0,70 5,65 20,65 30,40 70,40 80,65 95,65 100,70 100,100 90,100 80,90 70,100 30,100 20,90 10,100" style="fill:#777; stroke:#444; stroke-width:3px;"/>
<!--window-->
<polygon points="30,30 50,30 50,50 30,50" style="fill:blue; stroke:#444; stroke-width:3px;"/>
</svg>