Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

4. Hacking Your Graphics with Canvas and... > Hack 45. Embed SVG Directly in Your ...

Hack 45. Embed SVG Directly in Your HTML

You can embed SVG directly within your HTML file, negating the need for an external .svg file. With HTML5, your SVG elements can live in the same DOM as your HTML, and you’ll be removing some of the barriers of managing the two code bases separately.

SVG is powerful and can be quite complex, creating limitless illustrations and animations with a simple XML-based language. But in some cases you may only have a simple illustration that doesn’t require the rigor of an external file to manage the code. Just as HTML5 provides the ability to inline images directly in your markup, SVG can be embedded directly within your HTML as well.

Looking at the code that is involved, you can see that it’s exactly what you’d expect it to be. We have our HTML page, and instead of using an <object> tag that points to an external SVG file, we see the entire content of the previously external SVG file directly within our HTML. In our example, we will use our trusty old smiley face SVG illustration embedded directly within our HTML:

<doctype !html>
<html>
<head>
<meta charset="utf-8">
    <title>SVG Sample</title>
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet" />
<head>
<body>
<div class="navbar...  ...</div>
<h1> My Inline SVG Sample</h1>
<div id="svgWrapper" class="row">
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
  <circle cx="300" cy="164" r="160" fill="yellow" stroke="black"
  stroke-width="2" />
  <circle cx="210" cy="100" r="20" fill="black" />
  <circle cx="380" cy="100" r="20" fill="black" />
  <clipPath id="MyClip">
    <rect x="30" y="200" width="600" height="100" />
  </clipPath>
  <circle cx="300" cy="160" r="120" fill-opacity="0" stroke="black"
  stroke-width="5" clip-path="url(#MyClip)" />

</svg>

</div>

</body>
</html>

In the preceding example, once the renderer sees the SVG declaration tag it switches parsers from HTML to SVG. When the tag closes it goes back from SVG to HTML. Our results look exactly as they did when the SVG was in an external file (see Figure 4-24).

The SVG smiley face illustration where the SVG is inline with the HTML
Figure 4-24. The SVG smiley face illustration where the SVG is inline with the HTML

Why Inline?

Aside from the obvious “ease of use” argument, there are additional benefits to putting your SVG inline. Above all, inline SVG can be used as a performance enhancement. In some scenarios, you may benefit from not having to load the external file (as it will require an additional call to your server) and can put the SVG code directly in the page. Keep in mind that this is not always a performance enhancement, especially when you have a large amount of SVG code, which your browser may be able to load in parallel with your elements to save time. In cases like ours, when your illustration consists of only a few lines of code, it will generally be better in terms of performance to inline it and remove the additional call.

An additional benefit of inline SVG can be for DOM reference. In general, your SVG file is a separate DOM from your page when it’s loaded in an external SVG file (think of it as an iframe, an HTML element that loads a separate page inside the element). That being the case, any CSS that affects your SGV must be placed in or linked from your SVG file, and therefore can’t be applied to the HTML or the page. JavaScript similarly needs to access the SVG elements through the SVG object and falls prey to the same limitations as accessing items in an iframe. Moving the SVG into the DOM directly removes those barriers and allows you to truly treat your SVG elements just as any other DOM element.

Let’s look at a quick and quirky example of how inline SVG is affected by CSS declarations. In our example, we have a simple CSS declaration:

<style>
circle {
stroke: red;
 stroke-width: 12px;
}
 </style>

This style block is embedded directly into our HTML page, and in our page we have two SVG smiley faces. The first face is loaded as an external SVG image (Figure 4-25), and the second is loaded as an inline SVG image (Figure 4-26).

An SVG smiley face, loaded as an external .svg file
Figure 4-25. An SVG smiley face, loaded as an external .svg file
An SVG smiley face, loaded inline in the HTML document
Figure 4-26. An SVG smiley face, loaded inline in the HTML document

As you can see, the CSS applies to none of the circles within our embedded SVG and to every circle within our inline SVG. Embedded SVG may not always be the best choice for your documents, but it’s always nice to have options.

  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint