Skip to content

Instantly share code, notes, and snippets.

@ajuliano

ajuliano/Clickable svg in a-tag

Last active July 31, 2017 20:13
Show Gist options
  • Save ajuliano/39ba3ff46b3bfcdab88c to your computer and use it in GitHub Desktop.
Save ajuliano/39ba3ff46b3bfcdab88c to your computer and use it in GitHub Desktop.
Download ZIP
Make SVG clickable in a-tag and with image fallback
Raw
Clickable svg in a-tag
/**
* Make SVG clickable in a-tag and with image fallback (perfect for logotypes)
*
* HTML:
* <a href="http://dystonia-europe.org" target="_blank" class="u--svg-inside">
* <object data="svg-image.svg" type="image/svg+xml"> <img src="fallback-image.png" /> </object>
* </a>
*
*/
.u--svg-inside {
position: relative;
display: inline-block;
&:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
object {
width: 100%; // Optional
}
}
@benpdavison
Copy link

Implemented on Codepen for you.

http://codepen.io/ballerton/pen/XXEVeY

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