How to make the line which is in skillshare? - html

How to make these kind of lines?


Skillshare uses one very tall svg file to create this line. Everything else is layered on top of the lines to create this effect. You can find it in the inspector from loh-content/loh-path/svg.
Here you can see how the line goes throughout the page:
<!-- Important: This is directly from skillshare.com, so this is just an example to see how the line works, do not steal other creators work -->
<svg width="2560" height="5709" viewBox="0 0 2560 5709" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M535.771 5.99991L535.771 1.99991L535.771 5.99991ZM1390.77 1627L1390.77 1631L1390.77 1627ZM1056.04 2081.64L1053.52 2078.53L1056.04 2081.64ZM1288.27 2946.5L1287.71 2950.46L1288.27 2946.5ZM1222.27 4823.5L1222.72 4819.52L1222.27 4823.5ZM871.271 4580L867.358 4579.17L871.271 4580ZM1976.27 5703L1976.27 5707L1976.27 5703ZM1283.77 1400.5L1287.53 1399.15L1283.77 1400.5ZM1390.77 1623C1262.14 1623 1152.97 1610.24 1076.09 1575.91C1037.71 1558.77 1007.55 1536.34 986.985 1507.6C966.442 1478.9 955.271 1443.64 955.271 1400.5L947.271 1400.5C947.271 1445.11 958.85 1482.04 980.479 1512.26C1002.08 1542.44 1033.52 1565.66 1072.83 1583.21C1151.32 1618.26 1261.9 1631 1390.77 1631L1390.77 1623ZM535.771 9.99991C686.612 9.99985 898.913 46.0499 1104.33 134.742C1309.74 223.43 1507.94 364.614 1631.09 574.663L1637.99 570.616C1513.73 358.666 1313.94 216.529 1107.5 127.397C901.076 38.2698 687.694 1.99985 535.771 1.99991L535.771 9.99991ZM1631.09 574.663C1754.24 784.72 1783.19 1047.27 1736.53 1257.2C1689.8 1467.41 1567.89 1623 1390.77 1623L1390.77 1631C1573.65 1631 1697.33 1470.41 1744.34 1258.94C1791.4 1047.19 1762.24 782.558 1637.99 570.616L1631.09 574.663ZM1775.28 4158.71C1768.98 4245.32 1713.71 4299.62 1632.18 4336.23C1550.5 4372.91 1443.22 4391.44 1334.54 4406.6C1226.14 4421.72 1116.27 4433.51 1030.41 4456.85C944.858 4480.11 880.89 4515.41 867.358 4579.17L875.184 4580.83C887.652 4522.09 946.958 4487.83 1032.5 4464.57C1117.73 4441.4 1226.78 4429.71 1335.65 4414.52C1444.24 4399.37 1552.6 4380.74 1635.46 4343.53C1718.48 4306.25 1776.66 4249.93 1783.26 4159.29L1775.28 4158.71ZM867.358 4579.17C852.894 4647.32 891.635 4703.94 958.227 4745.95C1024.84 4787.97 1120.22 4816.07 1221.82 4827.47L1222.72 4819.52C1121.83 4808.2 1027.74 4780.34 962.496 4739.18C897.232 4698.01 861.723 4644.25 875.184 4580.83L867.358 4579.17ZM1221.82 4827.47C1345.78 4841.39 1430.52 4858.52 1483.29 4880.15C1509.67 4890.96 1527.71 4902.75 1538.7 4915.52C1549.56 4928.14 1553.66 4941.82 1551.98 4957C1550.29 4972.37 1542.64 4989.56 1529.37 5008.83C1516.13 5028.07 1497.49 5049.09 1474.2 5072.11C1427.62 5118.16 1362.9 5171.74 1286.73 5234.4L1291.81 5240.58C1367.89 5177.99 1432.93 5124.16 1479.83 5077.8C1503.28 5054.62 1522.32 5033.19 1535.96 5013.37C1549.58 4993.58 1558.04 4975.11 1559.93 4957.88C1561.86 4940.44 1557.04 4924.56 1544.76 4910.3C1532.61 4896.18 1513.27 4883.79 1486.33 4872.75C1432.46 4850.67 1346.76 4833.45 1222.72 4819.52L1221.82 4827.47ZM955.271 1400.5C955.271 1357.72 971.384 1325.19 996.388 1303.12C1021.46 1281 1055.74 1269.18 1092.31 1268.46C1165.45 1267.02 1246.92 1309.97 1280.01 1401.86L1287.53 1399.15C1253.19 1303.75 1168.41 1258.96 1092.15 1260.46C1054.03 1261.21 1017.83 1273.54 991.095 1297.13C964.292 1320.78 947.271 1355.53 947.271 1400.5L955.271 1400.5ZM1280.01 1401.86C1311.13 1488.28 1337.41 1590.25 1314.64 1704.06C1291.88 1817.8 1220 1943.99 1053.52 2078.53L1058.55 2084.75C1226.08 1949.36 1299.27 1821.65 1322.48 1705.63C1345.68 1589.68 1318.83 1486.05 1287.53 1399.15L1280.01 1401.86ZM1286.73 5234.4C1210.21 5297.35 1175.46 5358.84 1177.53 5416.05C1179.61 5473.33 1218.52 5524.7 1285.43 5567.55C1419.21 5653.24 1668.03 5707 1976.27 5707L1976.27 5699C1668.52 5699 1421.58 5645.26 1289.74 5560.82C1223.84 5518.61 1187.47 5469.26 1185.53 5415.76C1183.59 5362.21 1216.08 5302.88 1291.81 5240.58L1286.73 5234.4ZM1053.52 2078.53C905.305 2198.31 816.588 2308.6 774.368 2407.89C732.088 2507.33 736.475 2595.68 774.35 2671.02C812.148 2746.2 883.066 2807.97 973.063 2854.95C1063.09 2901.95 1172.49 2934.29 1287.71 2950.46L1288.83 2942.54C1174.31 2926.46 1065.82 2894.35 976.765 2847.86C887.674 2801.35 818.293 2740.61 781.498 2667.42C744.779 2594.39 740.278 2508.51 781.73 2411.02C823.243 2313.4 910.881 2204.09 1058.55 2084.75L1053.52 2078.53ZM1342.51 3448.44C1283.81 3472.78 1246.37 3496.79 1226.28 3521.16C1216.18 3533.42 1210.39 3545.86 1208.58 3558.52C1206.78 3571.18 1209.01 3583.77 1214.47 3596.24C1225.32 3621 1249.05 3645.69 1280.28 3670.75C1311.61 3695.89 1350.96 3721.78 1393.6 3748.81C1479.05 3802.99 1577.79 3861.84 1653.65 3929.29C1729.56 3996.77 1781.59 4072 1775.28 4158.71L1783.26 4159.29C1789.85 4068.75 1735.4 3991.26 1658.96 3923.31C1582.48 3855.31 1483 3796.01 1397.89 3742.05C1355.25 3715.02 1316.23 3689.34 1285.29 3664.52C1254.26 3639.61 1231.83 3615.94 1221.8 3593.03C1216.83 3581.66 1214.95 3570.58 1216.5 3559.65C1218.06 3548.7 1223.1 3537.6 1232.45 3526.25C1251.26 3503.43 1287.21 3480.03 1345.57 3455.83L1342.51 3448.44ZM1287.71 2950.46C1428.88 2970.28 1531.79 2999.58 1599.52 3035.23C1667.32 3070.92 1698.94 3112.42 1699.79 3156.36C1700.65 3200.59 1670.46 3249.23 1609.83 3299.31C1549.36 3349.26 1459.37 3399.99 1342.51 3448.44L1345.57 3455.83C1462.82 3407.22 1553.61 3356.13 1614.93 3305.48C1676.09 3254.95 1708.72 3204.2 1707.79 3156.2C1706.85 3107.93 1672.07 3064.38 1603.24 3028.15C1534.34 2991.88 1430.39 2962.41 1288.83 2942.54L1287.71 2950.46ZM535.771 1.99991C416.807 1.99996 142.392 23.7138 -2.38593 56.5995L-0.61408 64.4008C143.408 31.6865 417.194 9.99996 535.771 9.99991L535.771 1.99991ZM1976.27 5707C2123.6 5707 2263.21 5694.36 2369.23 5680.72C2475.12 5667.09 2547.81 5652.44 2561.18 5648.32L2558.82 5640.68C2546.19 5644.56 2474.13 5659.16 2368.21 5672.78C2262.43 5686.39 2123.17 5699 1976.27 5699L1976.27 5707Z" fill="#00FF84"></path>
</svg>
So to answer vaguely your question you will need to look into these:
How to create svg images
Basic CSS for layering the images (z-index)

Related

Change color inside path in svg

I have this svg and I want to know if it's possible to fill the zone inside the path with another color, lets say blue, so the final result is this shape with the content within it on blue.
All the changes I made only change the color of the border, but no the content inside the path, and I don't know if that is possible.
<svg width="100" height="100" viewBox="0 0 100 100" fill="white" xmlns="http://www.w3.org/2000/svg">
<path d="M16 7.9962C16 6.89373 16.9048 6 18.021 6H64.3239C65.3837 6 66.3928 6.41314 67.1427 7.16202C70.2957 10.3104 79.0209 19.0234 82.8304 22.8307C83.5806 23.5805 84 24.5959 84 25.6566V92.0038C84 93.1063 83.0952 94 81.979 94H18.021C16.9048 94 16 93.1063 16 92.0038V7.9962ZM65 7.9962L18 7.9962V92.0038H82V25L65 7.9962Z" fill="black" />
</svg>
Any help would be appreciated. thanks in advance

Icon font with multi-color SVG icons

We are trying to create an icon font for our custom multi-color icons. Icomoon worked like a charm for our UI icons (mono-color) but with multi-color icons, multiple lines are required to use an icon (look at the example below). Is there any way to achieve a similar behavior as the mono-colors but for multi-color SVG icons?
ex
mono-color icon:
<span class="icon-name">
multi-color icon:
<span class="icon-name">
<span class="path1">
<span class="path2">
<span class="path3">
<span class="path4">
<span class="path5">
<span class="path6">
<span class="path7">
<span class="path8">
</span>

If I understand that correctly, you are struggling with colouring svgs.
The svg code can contain a fill element (https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_circle for reference).
Moreover, you could try to change the color by using CSS (color property).

If you need to use an icon font (instead of inlined svgs) you can't circumvent placing multiple glyphs/elements for each color.
To some extend you might achieve a multicolored text display with Opentype SVG fonts.
Unfortunately browser support is quite limited:
Photoshop, version CC 2017 and above
Illustrator
Firefox, version 32 and above
Microsoft Edge, Windows 10 Anniversary Edition and above
In Windows 10, the DirectWrite and Direct2D platform components allow OpenType-SVG support in any apps that use those APIs
Besides converting svgs to such a font file will require more sophisticated font editors or at least more experience in font file generating/editing.
So using icon svgs directly is certainly more straightforward.
You can achieve a quite font-like behaviour e.g by:
combining multiple icons in a single svg using <defs> or <symbol>
using keyword based fill properties like "currentColor" to color icons via text color
using css-variables to define reusable color themes
Example: inlined svg icons
let iconInserts = document.querySelectorAll(".icon-insert");
let iconDefs = document.querySelector(".iconDefs");
if (iconInserts.length) {
iconInserts.forEach(function (iconSpan) {
let iconName = iconSpan.getAttribute("data-icon");
let symbolHref = "#" + iconName;
let iconDef = iconDefs.querySelector(symbolHref);
let viewBox = iconDef.getAttribute("viewBox");
// insert
let iconSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg");
iconSVG.classList.add("svg-inline");
iconSVG.setAttribute("viewBox", viewBox);
let iconUse = document.createElementNS("http://www.w3.org/2000/svg", "use");
iconSVG.appendChild(iconUse);
iconSpan.appendChild(iconSVG);
iconUse.setAttribute("href", symbolHref);
iconUse.classList.add(iconName);
});
}
body{
font-size:15vmin;
}
.svg-inline{
display:inline-block;
height:1em;
transform:translateY(20%);
}
.theme1{
--col1:green;
--col2:pink;
--col3:purple;
--col4:orange;
--col5:lime;
--col6:cyan;
--col7:#444;
}
.theme2{
--col1:green;
--col2:green;
--col3:green;
--col4:orange;
--col5:orange;
--col6:orange;
--col7:green;
}
.icon-news{
--col1:green;
--col2:pink;
--col3:purple;
--col4:orange;
--col5:lime;
--col6:cyan;
--col7:#444;
}
<p>
<svg class="svg-inline theme1" viewBox="0 0 1000 1000">
<use href="#icon-news" />
</svg>
Sample icon (colored by css vars)
<svg class="svg-inline theme2" viewBox="0 0 1000 1000">
<use href="#icon-news" />
</svg>
Sample icon 2 (colored by css vars)
<svg class="svg-inline" viewBox="0 0 1000 1000" style="color:orange">
<use href="#icon-news2" />
</svg>
Sample icon 3 (colored by currentColor)
<span class="icon-insert" data-icon="icon-news"></span>
Sample icon 4 (injected by js)
</p>
<!-- icon library in hidden svg file -->
<svg class="iconDefs" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" style="display:none">
<symbol id="icon-news" viewBox="0 0 1000 1000">
<path fill="var(--col1)" id="p6" d="M251 658h313v62H251z" />
<path fill="var(--col2)" id="p5" d="M626 658h252v62H626z" />
<path fill="var(--col3)" id="p4" d="M626 531h252v63H626z" />
<path fill="var(--col4)" id="p3" d="M626 406h252v63H626z" />
<path fill="var(--col5)" id="p2" d="M626 282h252v62H626z" />
<path fill="var(--col6)" id="p1" d="M501 344v187H314V344h187zm63-62H251v312h313V282z" />
<path fill="var(--col7)" id="bg" d="M1003 155H125v64H-1v533c0 52 43 94 94 94h817c51 0 93-42 93-94V155zM125 752c0 17-14 31-32 31-17 0-31-14-31-31V282h63v470zm816 0c0 17-14 31-31 31H182c4-10 6-21 6-31V219h753v533z" />
</symbol>
<symbol id="icon-news2" viewBox="0 0 1000 1000">
<path fill="currentColor" id="p1" d="M501 344v187H314V344h187zm63-62H251v312h313V282z" />
<path fill="currentColor" id="bg" d="M1003 155H125v64H-1v533c0 52 43 94 94 94h817c51 0 93-42 93-94V155zM125 752c0 17-14 31-32 31-17 0-31-14-31-31V282h63v470zm816 0c0 17-14 31-31 31H182c4-10 6-21 6-31V219h753v533z" />
</symbol>
</svg>
You might also write a simple icon insertion script injecting placeholder span elements by svg instances (4. example)
<span class="icon-insert" data-icon="icon-news"></span>
could be replaced by something like this:
<span class="icon-insert" data-icon="icon-news">
<svg class="svg-inline" viewBox="0 0 1000 1000">
<use href="#icon-news" class="icon-news" />
</svg>
</span>
Some icon libraries also provide a similar js based injection approach (e.g feather icons)
See also: css-tricks: Inline SVG vs Icon Fonts [CAGEMATCH]

why is my SVG element not following its path correctly?

I made a web design using Illustrator, copied it to Figma, and exported it as SVG.
I wanted the paper plane (#moveplane) to move along the dashed line so I drew a line, same shape as the dashed line, imported it as SVG, and copied the path for the plane to follow. But the plane strays away from the line, it's either too far along right or is completely far off.
I was wondering what could be the problem?
To give you a better idea, this is my Codepen - https://codepen.io/gelaciojica/pen/MWydLNm
#moveplane{
motion-path: path("M264 105.5C313.833 82.5 425.8 39.1 475 49.5C496.013 53.9418 517.669 64.5128 535 79.5575M535 79.5575C568.392 108.544 585.733 154.139 551.5 204.5C491.5 253.5 345 126.615 535 79.5575ZM535 79.5575C607.333 63.3716 742 71 792.5 184.5C821.5 275 786 286.5 792.5 325C796.5 377.5 822.9 412.7 840.5 421.5");
offset-path: path("M0.5 70.5C50.3333 47.5 133 -7.50001 242 1.58255C263.403 3.36603 284.669 16.5954 302 31.64M302 31.64C335.392 60.6268 352.733 106.221 318.5 156.583C258.5 205.583 112 78.6975 302 31.64ZM302 31.64C374.333 15.4542 509 23.0826 559.5 136.583C588.5 227.083 553 238.583 559.5 277.083C563.5 329.583 589.9 364.783 607.5 373.583");
animation: move 4s linear ;
}
#keyframes move {
100% {
motion-offset: 100%;
offset-distance: 100%;
}
}
}
and that is the only part I edited in the SVG file.

I would sugest to use <animateMotion> instead.
Also yoy can draw the plain as an svg group of elements or a symbol. I wouldn't use an image.
In order to debug the code make visible the path to be followed by the plain.
Also make sure the center of the plain is in the point x:0,y:0. In order to do this I've applied a transformation to the image.
body{background:black}
<svg viewBox="0 0 1080 720" fill="none">
<path id="path" stroke="red" stroke-width="5" d="M264 105.5C313.833 82.5 425.8 39.1 475 49.5C496.013 53.9418 517.669 64.5128 535 79.5575M535 79.5575C568.392 108.544 585.733 154.139 551.5 204.5C491.5 253.5 345 126.615 535 79.5575ZM535 79.5575C607.333 63.3716 742 71 792.5 184.5C821.5 275 786 286.5 792.5 325C796.5 377.5 822.9 412.7 840.5 421.5" />
<image id="image0" width="256" height="256" x="-128" y="-128" xlink:href="data:image/png;base64,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">
<animateMotion begin="0s" dur="10s" rotate="auto" repeatCount="indefinite">
<mpath xlink:href="#path"></mpath>
</animateMotion>
</image>
</svg>

HTML5: Drawing Letter with SVG Path

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="

Issue with fine position for a SVG file into HTML page (SVG made by Inkscape command line)

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%".