Skip to content

Instantly share code, notes, and snippets.

@jhonnymoreira

jhonnymoreira/svg-study.md

Last active March 3, 2016 18:32
Show Gist options
  • Save jhonnymoreira/127dcae5d811d4fa4bc8 to your computer and use it in GitHub Desktop.
Save jhonnymoreira/127dcae5d811d4fa4bc8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
svg-study.md

SVG Study

While studying, I have to keep some notes to better explain myself what is going on through my readings and annotate some of my conclusions about the code.

A11y SVG

  • For a more accessible SVG, you should use <title></title> to describe the content for blind people.
  • Use <desc></desc> to describe the content, it gets read by screen readers and helps to understand the SVG code.

SVG and Icons

  • SVG as a background-image icon isn't a good idea. Why?
    1. background-image with svg kills the use of a few properties such fill
    2. You are not able to customize the color even using background-color or color
  • Use a def file instead of loading icon by icon
  • Generate SVG sprites
    • obs: The concept of sprites in SVG are a bit different than the usual (with multiple images in one file and using background-position to coordinate them). With that in mind:
      • <defs> are like classes: they are used only if you reference them.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment