Skip to content

Instantly share code, notes, and snippets.

@vprasanth

vprasanth/fallback.svg

Created March 31, 2015 16:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vprasanth/a0d8536cf3f4f537cd43 to your computer and use it in GitHub Desktop.
Save vprasanth/a0d8536cf3f4f537cd43 to your computer and use it in GitHub Desktop.
Download ZIP
how to use svgs
Display the source blob
Display the rendered blob
Raw
fallback.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@vprasanth
Copy link
Author

SVG Usage

Usage of switch, g, and foreignObject tags to achieve a way to inject svg on a page and be confident it will show up on modern and older browsers without js hacks :)

Pros

  • can style with css
  • graceful degradation without js
  • not using img tag, won't disappear in high-contrast mode

Cons

  • has to be inline, can get messy
  • png is also loaded (network hit)

Mitigate

  • use includes to keep main template clean
  • optimize png and/or base64 encode if advantageous

Source
caniuse
Spec

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment