Skip to content

Instantly share code, notes, and snippets.

@sh78

sh78/svg-spritemap.html

Last active April 18, 2018 02:29
Show Gist options
  • Save sh78/af265fa5eacf512ae8a7 to your computer and use it in GitHub Desktop.
Save sh78/af265fa5eacf512ae8a7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
svg-spritemap.html
<!-- SVG spritemap definition & usage example -->
<!--
Define Some SVGs
External .svg file recommended, or inline below opening <body>
-->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon1" viewBox="0 0 161.4 188.9">
<title>For Screenreaders</title>
<path fill="#000" d="M150 0 L75 200 L225 200 Z" />
</symbol>
<symbol id="icon2" viewBox="0 0 161.4 188.9">
<title>For Screenreaders</title>
<path fill="#000" d="M150 0 L75 200 L225 200 Z" />
</symbol>
<symbol id="icon3" viewBox="0 0 161.4 188.9">
<title>For Screenreaders</title>
<path fill="#000" d="M150 0 L75 200 L225 200 Z" />
</symbol>
</svg>
<!-- Include in markup: -->
<!--
If external file 'sprite.svg'
role="presentation" is for purely decorattive content.
Reduntant title for maximum browser/screenreader support
-->
<svg title="For Screenreaders" role="presentation">
<use xlink:href="sprite.svg#icon1">
</svg>
<!--
If embedded definition in `<body>`
role="img" should be used when a sprite necessitates its own description
Reduntant title for maximum browser/screenreader support
-->
<svg title="For Screenreaders" role="img">
<use xlink:href="#icon1">
</svg>
<!--
Optional: add Some Browser Support & fallback PNGs
https://github.com/jonathantneal/svg4everybody
-->
<!--
Optional: Optimize SVG Spritemaps
https://github.com/svg/svgo
-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment