Skip to content

Instantly share code, notes, and snippets.

@davidensinger

davidensinger/fallback-for-svginline.html

Created November 6, 2014 21:09
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 davidensinger/68926c01d8e31613741c to your computer and use it in GitHub Desktop.
Save davidensinger/68926c01d8e31613741c to your computer and use it in GitHub Desktop.
Download ZIP
Fallback for Inline SVG in HTML5
Raw
fallback-for-svginline.html
<!DOCTYPE html>
<html>
<head>
<title>Fallback for Inline SVG in HTML5</title>
<style type="text/css">
.my-image {
background: url('my-image.jpg');
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!-- browsers that support SVG hide the fallback via this .fallback CSS class, otherwise this entire block of SVG markup is ignored by browsers that don’t support it -->
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<style>
<![CDATA[
.fallback { background: none; background-image: none; display: none; }
]]>
</style>
</svg>
<!-- your inline SVG code -->
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<switch>
<g>
<!-- put inline SVG here -->
</g>
<foreignObject>
<div class="my-image fallback"></div>
</foreignObject>
</switch>
</svg>
</body>
</html>
@davidensinger
Copy link
Author

Courtesy of SVG Fallback with Pure CSS.

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