Export SVGs in Sketch

Canvas is infinite

1) Add SVGs to their own artboards prior to exporting

Export SVGs in Sketch

2) Select svg layers (can't use dotted arrow select, will need to select in the layers panel)

Export SVGs in Sketch

3) Flatten - removes the inline transform/translate/rotate attributes

Sketch Workflow

1. Name your layers - it translates to an id
2. add SVGs to their own artboard
3. Use icon- & logo- prefix for svg icons
4. Try to add all simple icons to one svg file
5. Reduce layer nesting to prevent complex inline SVG nesting
6. Flatten and merge layers
7. Reduce the complexity of shapes and reduce points - will reduce <path> elements

SVG Code for Beginners

<svg viewBox="0 0 33 33">
  <g>
    <path d="M0.825,0.825 L32.175,32.175"
          id="Stroke-5"></path>
    <path d="M32.175,0.825 L0.825,32.175"
          id="Stroke-7"></path>
  </g>
</svg>

SVGO

SVG Optimization

Node based tool for optimizing SVG graphical files

npm install -g svgo

svgo --pretty folder/

svgo --pretty file.svg

svgo --pretty file.svg file.min.svg

Front end development

SVG Workflow

At this point we have been given the assets and optimized what we wanted to in the SVG code.

Defaults - forces the svg to only take up 100% of the parent container

svg, img, iframe, video {
  max-width: 100%;
}

How many of you utilize <use> in production?

Define once, use everywhere.

Social icons, logo soup & duplicate images

<use />

  <svg class="logo logo-footer"
        viewBox="0 0 120 34">
    <use xlink:href="#lightening" x="0" y="0"
         width="70" height="34" />
  </svg>

  <svg class="logo logo-full"
        viewBox="0 0 120 34" >
    <use xlink:href="#logo" />
  </svg>

  <svg class="svg svg-glow" style="fill:#61bde3;"
        viewBox="0 0 137.3 137.3" >
    <use xlink:href="#svgBadge" />
  </svg>

Code

social.svg.js

Social.js

FED SVG Workflow

1. Name your layers. Translates to an inline id
2. Use icon- & logo- prefix for svg icons & logos, respectively
3. Remove inline width and height attributes
4. Try to add all simple icons to one svg file
   • Utilize <use> when you can
5. svgo --pretty icons/

Filters

CodePen Collection

<svg class="svg svg-glow" style="fill:#61bde3;"
      viewBox="0 0 137.3 137.3">
  <use xlink:href="#svgBadge"/>
</svg>

<!-- Spotlight in a single spot -->
<filter id="spotlight">
  <!--Blur effect-->
  <feGaussianBlur stdDeviation="2" result="blur1" />
  <!--Lighting effect-->
  <feSpecularLighting result="spec1" in="blur1"
                      specularExponent="100"
                      lighting-color="rgba(255, 255, 255, 0.1)">
    <!--Light source effect-->
    <fePointLight x="60" y="69" z="100"/>
  </feSpecularLighting>
  <!--Composition of inputs-->
  <feComposite  in="SourceGraphic" in2="spec1"
                operator="arithmetic"
                k1="0" k2="1" k3="1" k4="0" />
</filter>

fePointLight - CodePen

<!-- Spotlight in a single spot -->
<filter id="spotlight">
  <!--Blur effect-->
  <feGaussianBlur stdDeviation="2" result="blur1" />
  <!--Lighting effect-->
  <feSpecularLighting result="spec1" in="blur1"
        specularExponent="100"
        lighting-color="rgba(255, 255, 255, 0.1)">
    <!--Light source effect-->
    <fePointLight x="60" y="69" z="100"/>
  </feSpecularLighting>
  <!--Composition of inputs-->
  <feComposite in="SourceGraphic" in2="spec1"
      operator="arithmetic"
      k1="0" k2="1" k3="1" k4="0" />
</filter>

feComposite

<filter id="spotlight">
  <!--Blur effect-->
  <feGaussianBlur stdDeviation="2" result="spec1" />

  <!--Composition of inputs-->
  <feComposite in="SourceGraphic" in2="spec1"
              operator="arithmetic"
              k1="0" k2="1" k3="1" k4="0" />
</filter>

Codepen

<feComposite in="SourceGraphic" in2="spec1"
    operator="arithmetic"
    k1="0" k2="1" k3="1" k4="0" />

operator=arithmetic applies

result = k1*i1*i2 + k2*i1 + k3*i2 + k4

  <!-- Glowing Pulse Animation -->
  <filter id="glow">
    <!--Blur effect-->
    <feGaussianBlur stdDeviation="7" result="blurElement">
      <animate attributeName="stdDeviation"
               from="0" to="7" dur="1s"
               repeatCount="indefinite"
               values="0; 7; 7; 0;"
               keyTimes="0; 0.45; 0.75; 1"
               keySplines=".42 0 1 1;
                           0 0 .59 1;
                           .42 0 1 1;
                           0 0 .59 1;
                           .42 0 1 1;
                           0 0 .59 1;
                           .42 0 1 1;
                           0 0 .59 1;"/>
    </feGaussianBlur>
    <!--Composition of inputs-->
    <feComposite in="SourceGraphic" in2="blurElement" operator="arithmetic"
                k1="0" k2="1" k3="1" k4="0" />
  </filter>

Codepen

feComposite, feGaussianBlur, animate

<!-- Light travelling across the icon -->
<filter id="spotlight-moving">
  <!--Blur effect-->
  <feGaussianBlur stdDeviation="2" result="blur1" />
  <!--Lighting effect-->
  <feSpecularLighting result="spec1" in="blur1"
        specularExponent="100"
        lighting-color="rgba(255, 255, 255, 0.1)">
    <!--Light source effect-->
    <fePointLight x="40" y="100" z="50">
      <animate  attributeName="x" from="20" to="200"
         dur="4s" repeatCount="indefinite"

         // defining the position of the light
         values="-10; 100; 170; 200; -10;"
         keyTimes="0; 0.15; 0.45; 0.75; 1"

         //keySplines defines set of Bezier control points
         keySplines=".42 0 1 1;
                     0 0 .59 1;
                     .42 0 1 1;
                     0 0 .59 1;
                     .42 0 1 1;
                     0 0 .59 1;
                     .42 0 1 1;
                     0 0 .59 1;" />
    </fePointLight>
  </feSpecularLighting>
  <!--Composition of inputs-->
  <feComposite in="SourceGraphic" in2="spec1"
        operator="arithmetic"
        k1="0" k2="1" k3="1" k4="0" />
</filter>

feSpecularLighting

<!-- Light travelling across the icon -->
<filter id="spotlight-moving">
  <!--Blur effect-->
  <feGaussianBlur stdDeviation="2" result="blur1" />
  <!--Lighting effect-->
  <feSpecularLighting result="spec1" in="blur1" specularExponent="100"
                      lighting-color="rgba(255, 255, 255, 0.1)">
    <!--Light source effect-->
    <fePointLight x="40" y="100" z="50">
      <animate  attributeName="x" from="20" to="200"
         dur="4s" repeatCount="indefinite"

         // defining the posiiton of the light
         values="-10; 100; 170; 200; -10;"
         keyTimes="0; 0.15; 0.45; 0.75; 1"

         // keySplines defines set of Bezier control points
         keySplines=".42 0 1 1;
                     0 0 .59 1;
                     .42 0 1 1;
                     0 0 .59 1;
                     .42 0 1 1;
                     0 0 .59 1;
                     .42 0 1 1;
                     0 0 .59 1;" />
    </fePointLight>
  </feSpecularLighting>
  <!--Composition of inputs-->
  <feComposite in="SourceGraphic" in2="spec1"
      operator="arithmetic"
      k1="0" k2="1" k3="1" k4="0" />
</filter>

Browser Support

SMIL IS DEAD!!!

<animate />

*Sarah Drasner SMIL conversions

Replace with GSAP

var blurNode = document
              .getElementsByTagName("feGaussianBlur");

tl = new TimelineMax({repeat: -1, yoyo:true})

tl.to(blurNode, .5, {attr:{stdDeviation:0}})
  .to(blurNode, .5, {attr:{stdDeviation:7}})
  .to(blurNode, .5, {attr:{stdDeviation:0}});

CodePen Collection

Ruby Helper

def embedded_svg(filename, options = {})
  assets = Rails.application.assets
  file = assets.find_asset(filename).source.force_encoding("UTF-8")
  doc = Nokogiri::HTML::DocumentFragment.parse file
  svg = doc.at_css "svg"
  if options[:class].present?
    svg["class"] = options[:class]
  end
  raw doc
end

Use

= embedded_svg "svg/ralph.svg", class: "ralph-logo"

Resources

• Creating & Exporting SVG Assets
• Exporting SVGs in Illustrator
• W3 SVG Filters
• ThoughtBot - SVG Articles
• ThoughtBot - Inline SVG Ruby Helper
• SVG Immersion Podcast with Rob Levin
• Sara Soueidan
• CSS Tricks
• Summary of this talk on Medium

SVG - viewport

I like to visualize the SVG canvas with a viewBox the same way as Google maps. You can zoom in to a specific region or area in Google maps; that area will be the only area visible, scaled up, inside the viewport of the browser. However, you know that the rest of the map is still there, but it’s not visible because it extends beyond the boundaries of the viewport - it’s being clipped out.

-- Sara Soueidan