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>
```
- 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.