Core Interaction

# Intro to SVG!

What is SVG?

"Scalable Vector Graphics (SVG) are an XML-based markup language for describing two-dimensional based vector graphics. As such, it's a text-based, open Web standard for describing images that can be rendered cleanly at any size and are designed specifically to work well with other web standards including CSS, DOM, JavaScript, and SMIL. SVG is, essentially, to graphics what HTML is to text.

SVG images and their related behaviors are defined in XML text files, which means they can be searched, indexed, scripted, and compressed. Additionally, this means they can be created and edited with any text editor or with drawing software.

Compared to classic bitmapped image formats such as JPEG or PNG, SVG-format vector images can be rendered at any size without loss of quality and can be easily localized by updating the text within them, without the need of a graphical editor to do so. With proper libraries, SVG files can even be localized on-the-fly."

--MDN

SVG is essentially just text that describes basic 2-D shapes. And that 'text' content can be used in HTML, CSS, and JavaScript. That's why it's lossless. It's always why it's awesome for illustration, interactivity, and animation.

# The Basics of SVG

  1. # How do we get our hands on an svg?

    • We can make them in design software (just export your design as an SVG)
    • We can write svg code by hand
    • We can use open-source resources to download and use them
    • We can use JavaScript libraries to generate svg code

  2. # How do we use svg?

    • There's actually a lot of ways, we'll cover two:
      1. inside an <img/> tag
      2. Paste the <svg> tag inline in our HTML

  3. # How do we interact with an svg element?

    • CSS and JavaScript, of course! 😄
      • ...but only if it's added inline in your HTML, not in an <img> tag

  4. # How do we animate with svg?

# Suggested Workflow if Exporting from Design Tool

  1. Export design as SVG from Illustrator, Sketch, etc.
  2. Use SVGOMG, an optimizer to clean up exported code (there are a lot of options, but the defaults generally work well)
  3. Copy the code and paste it inline into your HTML
<!-- it will look something like this...  -->
<svg class="coding-svg" viewBox="0 0 400 150" xmlns="http://www.w3.org/2000/svg">
  <path
    class="type"
    d="M40.263 88.975c6.162..."
    fill-rule="nonzero"
    fill="transparent"
    stroke="#000"
  />
  <rect class="box" x="12" y="19" width="376" height="112" rx="2" fill="none" stroke="#000" stroke-width="1px" />
</svg>

  1. Get to styling and animating with CSS and then JS

SVG vs. CSS Attributes

Not every attribute in SVG can be used as a CSS property.

Use this list of Presentation Attributes to know what you can target with CSS

# Resources

Last Updated: 5/1/2020, 7:53:31 PM