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.
