SVGs for Designers

Communicate. Communicate early.

SVG Assets

Sketch and Illustrator

Exporting Assets

Illustrator

Exporting SVG Illustrator for
Responsive Web Design in 2 minutes

SVG Assets

Sketch

1. By default, exported SVG code in Sketch is really messy

  defaults write com.bohemiancoding.sketch3 exportCompactSVG -bool yes

Source: robots.thoughtBot.com

Export SVGs in Sketch

By default the 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
   • Utilize <use> element (discussed later)
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"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs></defs>
  <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.js 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%;
}

FED SVG Workflow

1. Name your layers - it 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> element
5. svgo --pretty icons/
6. Other svgo parameters include --addClassesTOSVGElement -s=svgClass

Filters

<svg class="svg svg-glow" style="fill:#61bde3;"
      viewBox="0 0 137.3 137.3" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
  <use xlink:href="#svgBadge"/>
</svg>

  <!-- Glowing Pulse Animation -->
  <filter id="glow">
    <!--Blur effect-->
    <feGaussianBlur stdDeviation="7" result="blur1">
      <animate attributeName="stdDeviation"
               from="3" to="7" dur="1s" repeatCount="indefinite"
               values="3; 7; 7; 3;" 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="spec1" operator="arithmetic"
                k1="0" k2="1" k3="1" k4="0" />
  </filter>

feComposite, animate, feGaussianBlur

  <!-- Glowing Pulse Animation -->
  <filter id="glow">
    <!--Blur effect-->
    <feGaussianBlur stdDeviation="7" result="blur1">
      <animate attributeName="stdDeviation"
               from="3" to="7" dur="1s" repeatCount="indefinite"
               values="3; 7; 7; 3;" 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="blur1" operator="arithmetic"
                k1="0" k2="1" k3="1" k4="0" />
  </filter>

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

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

<!-- 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"
         values="-10; 100; 170; 200; -10;" // defining the posiiton of the light
         keyTimes="0; 0.15; 0.45; 0.75; 1"
         keySplines=".42 0 1 1; //keySplines defines set of Bezier control points
                     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"
         values="-10; 100; 170; 200; -10;" // defining the posiiton of the light
         keyTimes="0; 0.15; 0.45; 0.75; 1"
         keySplines=".42 0 1 1; //keySplines defines set of Bezier control points
                     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>

feComposite

combination of the two input images pixel-wise in image space

<!-- Glowing Pulse Animation -->
<defs>
  <!-- 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="40" y="15" z="50"/>
    </feSpecularLighting>
    <!--Composition of inputs-->
    <feComposite in="SourceGraphic" in2="spec1" operator="arithmetic"
                 k1="0" k2="1" k3="1" k4="0" />
  </filter>
</defs>

operator=arithmetic applies result = k1*i1*i2 + k2*i1 + k3*i2 + k4

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"

SVG 2.0

shipped Sept.15.2016

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

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