SVG cheat sheet

Setup

  • Inside *.svg files

    • <svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
  <!-- SVG code goes in here -->
</svg>

    • The xmlns attribute is critical.

    • width & height denote the dimensions of the SVG graphic—they’re very important for browser compatability.

    • viewBox defines an artboard, a cropping area, following this syntax: viewBox="x y width height"

  • Embedded in HTML files

    • <body>
  <svg width="256" height="256" viewBox="0 0 256 256">
    <!-- SVG code goes in here -->
  </svg>
</body>

    • The xmlns attribute is not necessary.

  • Embedded in CSS files

    • background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' viewBox='0 0 256 256'%3E%3Cpath d='M201.5 24v31.4h31.7V234H55.5v-30H22.7V24h178.8zm-11.8 11.4H34.4v157.3h155.2V35.4z'/%3E%3C/svg%3E");

    • Start every URL with the DataURL scheme: data:image/svg+xml;charset=utf8,

    • The < must be escaped with %3C

    • The > must be escaped with %3E

    • The # must be escaped with %23

    • The " must be replaced with '

  • View box

    • Controls the artboard of the SVG—like in Illustrator.

    • <svg viewBox="0 0 256 256"></svg>

    • Graphics that exist outside the viewbox will be cropped or changed—based on preserveAspectRatio

  • Preserve aspect ratio

    • Controls how the graphics inside the artboard are adjusted when the SVG’s width/height are changed.

    • <svg preserveAspectRatio="xMidYMid"></svg>

    • none—stretch the graphic to fill the space.

    • xMidYMid—uniform scaling, aligning to the middle.

    • xMinYMin—uniform scaling, aligning to the top-left.

    • xMaxYMax—uniform scaling, aligning to the bottom-right.

    • And everything else in between: think of the viewBox having 9 different anchor points for the graphic.

Shapes

  • Circles

    • <circle cx="100" cy="100" r="100" />

    • cx—the centre “x” coordinate.

    • cy—the centre “y” coordinate.

    • r—the radius of the circle (half its width).

  • Ellipses

    • <ellipse cx="100" cy="100" rx="100" ry="50" />

    • cx—the centre “x” coordinate.

    • cy—the centre “y” coordinate.

    • rx—the horizontal radius of the oval (half its width).

    • ry—the verical radius of the oval (half its height).

  • Rectangles

    • <rect x="0" y="0" width="256" height="64" rx="5" ry="5" />

    • x—the top left corner’s “x” coordinate.

    • y—the top left corder’s “y” coordinate.

    • width—the horizontal size of the rectangle.

    • height—the vertical size of the rectangle.

    • rx—for adding rounded corners; the horizontal radius of the rounding circle.

    • ry—for adding rounded corners; the vertical radius of the rounding circle.

  • Polygons

    • A non-rectangular shape.

    • <!-- A triangle -->
<polygon points="128,0 256,256 0,256" />
<!-- A hexagon -->
<polygon points="60,20 100,40 100,80 60,100 20,80 20,40" />

    • points—defines the coordinates of each of the corners of the shape—the format is: x,y x,y…

  • Lines

    • Lines with only a start point and an end point.

    • <line x1="0" y1="0" x2="256" y2="256" />

    • x1—the line’s starting “x” coordinate.

    • y1—the line’s starting “y” coordinate.

    • x2—the line’s ending “x” coordinate.

    • y2—the line’s ending “y” coordinate.

  • Polylines

    • Multi-point lines.

    • <polyline points="0,256 50,150 100,100 150,50" />

    • points—defines the coordinates of each position of the line—the format is: x,y x,y…

  • Paths

    • Paths, like Illustrator, multiple anchors with handles.

    • <path d="M100,160 Q128,190 156,160" />

    • d—full of points and coordinates to control the path and its handles.

    • Generally this is written by a program, like Illustrator, not written by hand.

    • See the path documentation for more details.

Grouping & naming

  • Grouping elements

    • Use the <g> tag to group elements together.

    • <g>
  <circle cx="100" cy="100" r="100" />
  <rect x="0" y="0" width="256" height="64" />
  <polyline points="0,256 50,150 100,100 150,50" />
</g>

  • Classes

    • The class attribute can be added to any element.

    • <svg class="dino" width="256" height="256" viewBox="0 0 256 256">
  <g class="head">
    <circle class="eye" cx="100" cy="100" r="100" />
    <rect class="nose" x="0" y="0" width="256" height="64" />
  </g>
</svg>

  • IDs

    • The ID attribute can be added to any element.

    • <svg id="dino" width="256" height="256" viewBox="0 0 256 256">
  <g id="head">
    <circle id="eye" cx="100" cy="100" r="100" />
    <rect id="nose" x="0" y="0" width="256" height="64" />
  </g>
</svg>

    • Remember that the ID is unique: it can only be used once per SVG graphic & once per HTML file.

  • Symbols

    • Creating reusable graphics for within the SVG—great for making icons.

    • <symbol id="icon-smiley" viewBox="0 0 256 256">
  <circle cx="128" cy="128" r="120" />
  <circle cx="100" cy="104" r="12" />
  <circle cx="156" cy="104" r="12" />
  <path d="M100,160 Q128,190 156,160" />
  <rect x="97" y="66" width="6" height="32" rx="4" ry="4" />
  <rect x="153" y="66" width="6" height="32" rx="4" ry="4" />
</symbol>

  • Using symbols

    • The <use> is how we use previously defined symbols.

    • <use xlink:href="#icon-smiley" />

  • Definitions

    • Create shapes and graphics that won’t be visible until used in other places like gradients, paths for text, masks, etc.

    • <defs>
  <path id="arc" d="M100,160 Q128,190 156,160" />
</defs>

Styling shapes

  • Fill

    • <circle fill="orange" cx="100" cy="100" r="100" />

<g fill="midnightblue">
  <circle cx="100" cy="100" r="100" />
</g>

    • fill—used to set the color of a shape. Can use any colour format: keywords, # hex, rgb(), rgba()

    • Can be put on any element including the <svg> element.

  • Opacity

    • Same as CSS.

    • <circle opacity=".5" fill="orange" cx="100" cy="100" r="100" />

  • Gradients

    • <defs>
  <linearGradient id="the-gradient">
    <stop offset="0%" stop-color="orange" />
    <stop offset="100%" stop-color="red" />
  </linearGradient>
</defs>

<circle fill="url(#the-gradient)" cx="100" cy="100" r="100" />

Styling strokes

  • Stroke

    • Adds a line around the outside of a shape or along a path.

    • <circle stroke="orange" cx="100" cy="100" r="100" />

    • stroke—used to set the color of a stroke. Can be any colour format: keywords, # hex, rgb(), rgba()

  • Stroke width

    • <circle stroke-width="10" stroke="orange" cx="100" cy="100" r="100" />

    • stroke-width—used to set the thickness of the stroke.

  • Stroke opacity

    • <circle stroke-opacity=".5" stroke="orange" cx="100" cy="100" r="100" />

    • stroke-opacity—used to set the transparency of the stroke itself.

  • Stroke line cap

    • <circle stroke-linecap="round" stroke="orange" cx="100" cy="100" r="100" />

    • stroke-linecap—used to control the end of strokes: butt, round, square.

  • Stroke line join

    • <circle stroke-linejoin="bevel" stroke="orange" cx="100" cy="100" r="100" />

    • stroke-linejoin—used to control the corner style of strokes: miter, round, bevel.

  • Stroke miter limit

    • <circle stroke-miterlimit="4" stroke="orange" cx="100" cy="100" r="100" />

    • stroke-miterlimit—when two stroke corners meet they can sometimes make very long pointy triangles—this controls how long they are.

  • Line dashes

    • <line stroke-dasharray="4,6" x1="0" y1="0" x2="256" y2="256" />

    • stroke-dasharray—creates dashed lines for strokes

    • The 4,6 means: “4 pixel dash followed by 6 pixel space.”

Text

  • Text blocks

    • <text x="128" y="128" text-anchor="middle">Dinosaurs!</text>

    • x—the “x” coordinate of the text’s anchor point.

    • y—the “y” coordinate of the text’s anchor point.

    • text-anchor—the text alignment: start (left), middle (centre), end (right).

  • Inside text

    • <text x="0" y="0">
  Dimetrodon is
  <tspan fill="limegreen">not</tspan>
  a dinosaur.
</text>

    • The tspan element is used to surround words inside <text>

    • It has the same purpose as HTML’s <span> element.

  • Text adjustments

    • <text x="0" y="0">
  Dimetrodon is
  <tspan dy="-30">not</tspan>
  a dinosaur.
</text>

    • dx—adjust the text horizontally in relation to where it is currently.

    • dy—adjust the text vertically in relation to where it is currently.

  • Text on a path

    • Make text follow along with a path.

    • <defs>
  <path id="arc" d="M100,160 Q128,190 156,160" />
</defs>

<textPath xlink:href="#arc">Dinosaurs!</textPath>

Styling text

  • Font family

    • Same as CSS.

    • <text font-family="Georgia, serif">Dinosaurs!</text>

  • Font size

    • Same as CSS.

    • <text font-size="1.5rem">Dinosaurs!</text>

  • Font weight

    • Same as CSS.

    • <text font-weight="bold">Dinosaurs!</text>

  • Font style

    • Same as CSS.

    • <text font-style="italic">Dinosaurs!</text>

  • Text decoration

    • Same as CSS.

    • <text text-decoration="none">Dinosaurs!</text>

  • Letter spacing

    • Same as CSS.

    • <text letter-spacing="30">Dinosaurs!</text>

  • Text length

    • Space out the letters to fill a specific width.

    • <text textLength="900">Dinosaurs!</text>

  • Gradients

    • Same as gradients on shapes.

    • <defs>
  <linearGradient id="the-gradient">
    <stop offset="0%" stop-color="limegreen" />
    <stop offset="100%" stop-color="green" />
  </linearGradient>
</defs>

<text fill="url(#the-gradient)">Dinosaurs!</text>

  • Web fonts

    • First embed the font face you want to use.

    • <link href="http://fonts.googleapis.com/css?family=Denk+One" rel="stylesheet">

    • Then use the family name in the font-family attribute:

    • <text font-family="Denk One" x="10" y="100">Dinosaurs!</text>

    • Or with CSS:

    • <style>
  text {
    font-family: "Denk One";
  }
</style>

<text x="10" y="100">Dinosaurs!</text>

Linking & images

  • Links

    • <a xlink:href="https://en.wikipedia.org/wiki/Dinosaurs">
  <text>Dinosaurs!</text>
</a>

    • The <a> tag works the same in SVG, just the href attribute is now xlink:href

  • Images

    • <image width="500" height="500" xlink:href="images/stegosaurus.jpg" />

    • Very similar to HTML’s image tag, but instead of src it’s xlink:href to point to the file.

Styling with CSS

  • Styling shapes

    • Many of the styling attributes listed above for shapes & lines can also be used in CSS.

    • <circle class="face" cx="128" cy="128" r="120" />

    • .face {
  fill: yellow;
  stroke: #000;
  stroke-width: 6px;
  stroke-dasharray: 4,4;
}

  • Styling text

    • Many of the styling attributes listed above for text can also be used in CSS.

    • <text class="dinos">Dinosaurs!</text>

    • .dinos {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1.5rem;
}

  • Styling effects

    • Many of the effect related attributes can also be styled in CSS.

    • <rect class="box" x="0" y="0" width="256" height="64" />

    • .box {
  fill: limegreen;
  transform: rotate(45deg);
  transition: all .25s linear;
}

.box:hover {
  fill: orange;
}

Effects

  • Hover

    • Using CSS we can add hover effects to any SVG element.

    • Only works if the SVG is embedded in the HTML.

    • <rect class="box" x="0" y="0" width="256" height="64" />

    • .box {
  fill: green;
}

.box:hover {
  fill: limegreen;
}

  • Transformations

    • The transform property in CSS actually started in SVG, so it’s an attribute or CSS.

    • <rect transform="rotate(45)" x="0" y="0" width="256" height="64" />

    • Or in CSS:

    • rect {
  transform: rotate(90deg);
}

  • Transform origin

    • In SVG, the transform origin for rotation is set in the rotate() value.

    • <rect transform="rotate(45, 10, 10)" x="0" y="0" width="256" height="64" />

    • In CSS, we can use transform-origin—but we cannot use the keywords like center, it has to be set in pixels.

    • rect {
  transform: rotate(90deg);
  /* These pixels are within the SVGs viewport pixel measurements */
  transform-origin: 10px 10px;
}

  • Transitions

    • Using CSS we can add transitions to any SVG element.

    • Only works if the SVG is embedded in the HTML.

    • <rect class="box" x="0" y="0" width="256" height="64" />

    • .box {
  fill: green;
  transition: all .25s linear;
}

.box:hover {
  fill: limegreen;
}

  • Animations

    • Using CSS we can add animations to any SVG element.

    • Only works if the SVG is embedded in the HTML.

    • <rect class="box" x="0" y="0" width="256" height="64" />

    • .box {
  animation: spin 2s linear;
}

@keyframes spin {

  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }

}

  • Masking

    • Making parts of graphics and text semi-transparent with masks.

    • <defs>
  <mask id="mask">
    <image width="500" height="200" xlink:href="images/text-mask.png" />
  </mask>
</defs>

<rect mask="url(#mask)" x="0" y="0" width="256" height="64" />
<text mask="url(#mask)">Splatter!</text>

    • The <mask> element inside of the definitions can be used along with the mask="" attribute.

    • Mask should be black and white images: the black becoming transparent & the white showing.

  • Texturing & patterns

    • Filling inside graphics and text with a repeating texture or pattern.

    • <defs>
  <pattern width="500" patternUnits="userSpaceOnUse" height="200" id="texture">
    <image xlink:href="images/mars.jpg" width="800" height="500" />
  </pattern>
</defs>

<rect fill="url(#texture)" x="0" y="0" width="256" height="64" />
<text fill="url(#texture)">Mars</text>

    • The <pattern> element inside of the definitions can be used along with the fill="" attribute.

  • Filters

    • Filters allow graphic effects to be applied to elements and text.

    • <defs>
  <filter id="blur-me">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>
</defs>

<rect filter="url(#blur-me)" x="0" y="0" width="256" height="64" />
<text filter="url(#blur-me)">Mars</text>

SVG icons

  • Spritebot

    • Drop a bunch of exported icons from Illustrator into Spritebot and save.

    •  

    • Put the saved sprite sheet into your images folder.

    • The original, exported SVGs can be trashed.

  • Using icons

    • Use the <svg> tag and the <use> tag to grab an icon from within the sprite sheet.

    • The id of the icon is the same as it’s filename when dropped into Spritebot.

    • <svg><use xlink:href="images/icons.svg#stego"></use></svg>

    • It’s usually a good thing to insert it into an element for CSS control.

    • <i class="icon i-32">
  <svg><use xlink:href="images/icons.svg#stego"></use></svg>
</i>

  • Seeing icons

    • SVG icons won’t load in Chrome, Firefox or Opera if you double click the HTML file.

    • They will still absolutely work in those browsers when your website is online.

    • This is a security feature of the browsers.

    • They will load properly in Safari.

    • To get proper loading on the local version you need a web server—drop your folder into Markbot and press ⌘B

Accessibility

  • Titles & descriptions

    • <title>Dinosaurs are among us!</title>

    • Use the <title> tag to add alternative text to an SVG—think of it like the <img alt="">

    • <desc>Dinosaurs are living among us now—or at least their descendants—in the form of birds.</desc>

    • The <desc> tag is for more complex descriptions and information.

    • If the SVG was a pie-chart, for example, <desc> would hold all the percentages and stuff.

  • ARIA descriptions

    • <svg aria-details="#dino-info"></svg>

    • <div id="dino-info">
  <h2>Dinosaurs are among us!</h2>
  <p>Dinosaurs are living among us now—or at least their descendants—in the form of birds.</p>
</div>

    • The aria-details attribute is a great way to use HTML to complement an SVG—especially if the content is really detailed.

  • Hiding SVGs

    • <svg aria-hidden="true">
  <text>Splatter!</text>
</svg>

    • The aria-hidden="true" attribute can be used to completely hide the graphic and its text from accessibility tools.