El Noguer

Joaquim Perez i Noguer

Tutorial SVG

Filed under: Web — Joaquim Perez Noguer at 3:01 pm on Divendres, Febrer 23, 2018

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">
  <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>
  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;
<div class="grid">
<svg width="750" height="500">
<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 id="rightcaret">
<!-- Right caret icon made with a polyline -->
<polyline points="
  3 3
  30 28
  3 53
<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>
<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 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" />
<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
<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>

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


No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>