Tutorial SVG
Un bon tutorial SVG per entendre com es pot utilitzar-lo manualment.
Here’s how your completed code should look:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Hand Coded SVG</title> <style> html, body { height: 100%; width: 100%; background: #e9e9e9; } body { margin: 0; text-align: center; } .grid { width: 750px; height: 500px; margin: 0 auto; padding-top: 100px; padding-left: 100px; background-image: url('grid.png'); position: relative; } .grid::before { content: ""; border-left: 1px solid #7c7cea; position: absolute; top: 0; left: 100px; width: 750px; height: 600px; } .grid::after { content: ""; border-top: 1px solid #7c7cea; position: absolute; top: 100px; left: 0; width: 850px; height: 500px; } svg { stroke: rgb(0, 0, 0); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; fill: none; } </style></head><body><div class="grid"><svg width="750" height="500"><defs><g id="leftalign"><!-- Left align icon made with lines --><line x1="3" y1="3" x2="48" y2="3"></line><line x1="3" y1="19" x2="65" y2="19"></line><line x1="3" y1="35" x2="48" y2="35"></line><line x1="3" y1="51" x2="65" y2="51"></line></g><g id="rightcaret"><!-- Right caret icon made with a polyline --><polyline points=" 3 3 30 28 3 53"></polyline></g><g id="browser"><!-- Browser icon made with rectangle and lines --><rect x="3" y="3" width="80" height="60"></rect><line x1="3" y1="19" x2="83" y2="19"></line><line x1="20" y1="3" x2="20" y2="17"></line></g><symbol id="alert" viewBox="0 0 86 86"><!-- Alert icon made with ellipses and a line --><ellipse cx="43" cy="43" rx="40" ry="40"></ellipse><ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse><line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line></symbol><symbol id="play" viewBox="0 0 86 86"><!-- Play icon made with ellipse and polygon --><ellipse cx="43" cy="43" rx="40" ry="40"></ellipse><polygon points="35 23, 60 43, 35 63" /></g><symbol id="download" viewBox="0 0 64 71"><!-- Download icon made with path --><path d=" M 18 3 L 46 3 L 46 40 L 61 40 L 32 68 L 3 40 L 18 40 Z"></path></symbol></defs><use href="#leftalign" x="100" y="100"></use><use href="#rightcaret" x="300" y="100"></use><use href="#browser" x="500" y="100"></use><use href="#alert" x="100" y="200" width="100" height="100"></use><use href="#play" x="300" y="200" width="100" height="100"></use><use href="#download" x="500" y="200" width="100" height="100"></use></svg></div></body></html>That covers the essentials of hand coding SVG! Let’s recap and summarize what we learned:
- Setup your
<svg>element to wrap your whole graphic. - Use
<line>and<polyline>to create lines. - Use
<rect>,<ellipse>and<polygon>to create closed shapes. - Use
<path>to create anything you want. - Group shapes with the
<g>element. - For group like behavior with extra features, use
<symbol> - Use the
<defs>element to define any reusable symbols and groups. - Place your defined reusable symbols and groups with the
<use>element
