Skip to content

Instantly share code, notes, and snippets.

@ianlintner-wf

ianlintner-wf/svg.html

Last active August 29, 2015 13:55
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 ianlintner-wf/8733934 to your computer and use it in GitHub Desktop.
Save ianlintner-wf/8733934 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
svg.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Embedded SVG</title>
</head>
<body>
<h1>Embedded SVG</h1>
<a href="http://www.sitepoint.com/add-svg-to-web-page/">Source of this stuff.</a>
<!-- SVG code -->
<svg width="300px" height="300px" xmlns="http://www.w3.org/2000/svg">
<text x="10" y="50" font-size="30">My SVG</text>
</svg>
<object type="image/svg+xml" data="image.svg">Your browser does not support SVG</object>
<embed type="image/svg+xml" src="image.svg" />
<img src="image.svg" />
</body>
</html>
Raw
z_readme.txt
Which Should You Use?
In most circumstances, I recommend using the <object> tag to display SVG images. It feels a little unnatural, but it’s the most reliable method if you want to provide dynamic effects.
For images without interaction, the <img> tag or a CSS background can be used.
Inline SVGs or iframes are possibly options for some projects, but it’s best to avoid <embed>.
Coming soon: further SVG articles including CSS and scripting…
Raw
z_svg.css
#myelement
{
background-image: url(image.svg);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment