Radical Design Course by Jack McDade

From the creator of Statamic

Learn how to make your websites standout and be remembered.

Bought Jack McDade's course on design. Going through it now...and it is SO well done!

— Justin Jackson, Transistor.fm

SVG Tag

The SVG tag renders inline SVGs and lets you easily set attributes on the <svg> element.

Overview

Working with inline SVGs gives you the ability to cache them along with your markup and style them with CSS. It's one of the best reasons to work with SVG images.

To make dev life easier, this tag collapses whitespace automatically and can set attributes like class or height/width for you. It looks in resources and public automatically to keep your src parameter nice and short, like a summer haircut.

Example

// Using resources/svg/circle.svg
{{ svg src="circle" class="fill-current text-teal" }}
 
// Using public/img/icons/square
{{ svg src="img/icons/square" class="fill-current text-mint" }}
 
// Using a variable `promo_graphic` (defined in your blueprint)
{{ svg :src="promo_graphic" class="fill-current text-orange" }}
// Using resources/svg/circle.svg
<s:svg src="circle" class="fill-current text-teal" />
 
// Using public/img/icons/square
<s:svg src="img/icons/square" class="fill-current text-mint" />
 
// Using a variable `promo_graphic` (defined in your blueprint)
<s:svg :src="$promo_graphic" class="fill-current text-orange" />
<svg class="fill-current text-teal" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50"/>
</svg>
 
<svg class="fill-current text-mint" viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" />
</svg>

Additional Reading

Parameters

src

string

The svg filename relative to root. The .svg extension is optional. Intelligently looks through (in this order):

  • resources/svg
  • resources
  • public/svg
  • public

sanitize

boolean

Determines whether the SVG should be sanitized before being output. Defaults to true.

*

string

Any additional parameter will be set as attributes on the <svg> element. For example class="fill-current" will set <svg class="fill-current" ...>.

Docs feedback

Submit improvements, related content, or suggestions through Github.

Betterify this page →