HTML and CSS Reference
In-Depth Information
When used this way, SVG still has the advantage of being scalable; you
can set it to take up half the browser window, and it will remain sharp
no matter how high or low your user's screen resolution. But you lose
the advantage of being able to manipulate the image from the Java-
Script—the elements of the image aren't present in the DOM .
Referencing an SVG image from CSS
In the same way that it can be used as an image in HTML , SVG can be
referenced as an image in CSS :
div { background: url(svg-2.svg) top right no-repeat; }
This is particularly useful in concert with CSS3's background-size
property, which you'll learn more about in chapter 10. You can create
background images that scale with the screen resolution but stay sharp.
Embedding SVG as an object
The <object> element is a general-purpose method to embed any exter-
nal content in your web page. To embed SVG with <object> , you need
to supply two parameters specifying the filename and the file type:
<object type="image/svg+xml" data="svg-2.svg"></object>
In browsers with native support for SVG , the object-embedding
approach has results similar to including the SVG inline: the SVG ele-
ments are available in the DOM and can be manipulated. This tech-
nique works in every browser that has SVG support; and if you're
using the same SVG image on different pages of your site, it's cached
the same way a normal image would be, making your site load slightly
faster. The corollary of this, of course, is that if you use the image only
once it will require a second request to the server, making your site
slightly slower to load.
SVG support in older browsers with SVG Web and Raphaël
You don't have to rely on direct browser support for SVG. Older
browsers and IE offer a couple of JavaScript libraries that
enable SVG support through alternative means.
Search WWH ::

Custom Search