SVG Cheatsheet

Svg security

svg security is exposed when your site is open to svg uploads and you are allowing website users to upload there own files and content. they may upload malicious code in the svg

gtags

tags which represent groups.

<g>

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

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>

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>

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.

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.

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>

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

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>

Links

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

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