Notes on working with SVG on the web

README.md

SVG

Concepts and definitions for SVG.

Read more

• Accessible SVGs

XML-SVG

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">[...]</svg>

Viewbox

• width and height: max. available width/height
• viewBox: coordinate system as reference for width/height

<!-- Original -->
<svg width="400px" height="400px" viewBox="0 0 400 400" [...]>

<!-- Half -->
<svg width="400px" height="400px" viewBox="0 0 600 600" [...]>

<!-- Double -->
<svg width="400px" height="400px" viewBox="0 0 200 200" [...]>

Responsive SVG

See: https://thenewcode.com/744/Make-SVG-Responsive

<div class="svg-container">
  <svg preserveAspectRatio="xMinYMin meet"></svg>
</div>

.svg-container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%; // Override this inline for aspect ratio other than square with: 100% * height/width
  vertical-align: middle;
  overflow: hidden;

  svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
}

Text

• y is the baseline
• Each letter can be placed individually like this: x="10 15 20 25"
• Align text from top to bottom: writing-mode="tb"

<text x="10" y="10">
  Hello World!
</text>

Text & Path

<path id="path" d="[...]" fill="none" />
<text>
  <textPath xlink:href="#path">Hello World!</textPath>
</text>

Links

• Links are namespaced to: xmlns:xlink="http://www.w3.org/1999/xlink"

<a xlink:href="http://">
  <line [...] />
</a>

Groups

• Styles and transitions take effect on all grouped elements

<g style="stroke:green;stroke-width:5px;">
  <rect [...] />
  <circle [...] />
</g>

Symbols

• Grouping elements like <g>
• Available via <use> as cloned element

<defs>
  <symbol id="symbol" >
    <rect [...] />
    <circle [...] />
  </symbol>
</defs>

<use x="0" y="0" xlink:href="#symbol" />
<use x="10" y="10" xlink:href="#symbol" />	

Transform

• Transformation affects all parameters (also x and y positions)

• Separate multiple transformations with comma

• The order of multiple transformations is important!

• Position: transform="translate(10,10)"

• Scale: transform="scale(2)"

• Rotate: transform="rotate(45)"

• Rotate with pivot point: transform="rotate(45,100,100)"

• Skew: transform="skewX(30)" and transform="skewY(30)"

• Multiple transformations: transform="translate(10,10),rotate(45,100,100)"

Animation

• Animation inline or via xlink (see below)
• Animate XML attributes: attributeType="XML"
• Prevent reset after animation: fill="freeze"
• Prevent restart after animation: restart="never"

<circle fill="black" [...]>
  <animate attributeName="fill" attributeType="XML" begin="mouseover" from="black" to="red" dur="2s" fill="freeze" restart="never" />
</circle>

<circle id="animate" cx="100" cy="100" r="50" [...] />
<animate xlink:href="#animate" attributeName="cx" attributeType="XML" begin="click" from="100" to="200" dur="2s" fill="freeze" restart="never" />

Animation & Path

<circle [...]>
  <animateMotion path="[...]" dur="2s" fill="freeze" />
</circle>

Editor: Inkscape

Website: https://inkscape.org/en/

Usage

• Remove all grouped elements
• Save as » Optimized SVG (no group collapsing, do not create groups for similar attributes)

Libraries

• http://snapsvg.io/
• http://svgjs.com/