Gameify Everything
Automatic PHP Portfolio
Designing For Color BlindnessBefore I get to creation tools for SVG, I thought it would be useful to cover the ways in which SVG files may be used on web pages. In contrast to the limited utility of bitmap images, the ways in which SVG files can be used are diverse:
Inline, via the <img /> tag
Probably the easiest method, and the one most familiar to web developers. SVG files can be brought onto a web page using an <img /> tag, just as bitmap images are:
- <img src="assets/svg/twitter-icon.svg" alt="Twitter" title="Twitter"
- style="width: 300px; height: 300px;" />
Note that size can also be set in the SVG document itself; scaling doesn’t matter per se, as SVG is vector based. CSS is applied to the SVG image like any other element.
The only downside to this technique is the SVG features that you drop when doing so: inline SVG images may include animation, but links inside the file and any scripts and interactivity that are part of the SVG code will be ignored. (The entire SVG image can be linked using an <a> element, of course),
Browser support for this method is strong:
| IE | Firefox | Chrome | Safari | Opera | iOS | Android |
|---|---|---|---|---|---|---|
| 9.0 | 1.5 and later | All versions | 8 and later | 3.2 and later | 3.0 and later | |
In CSS
SVG is also very effective in CSS: like bitmaps, SVG files can be applied to properties like background-image, and much more besides:
- header { background: url(assets/svg/columns.svg); }
Browser support is much the same as for inline SVG images:
| IE | Firefox | Chrome | Safari | Opera | iOS | Android |
|---|---|---|---|---|---|---|
| 9.0 | 1.5 and later | All versions | 3.0 and later | 8 and later | 3.2 and later | 3.0 and later |
Using SVG in CSS also drops any scripting, interactivity, and links.
Directly, as an SVG tag
HTML5 has support for writing SVG files directly into the page. This preserves of the features of SVG, and is perhaps the best current practice, so long as you’re prepared to drop some backwards browser compatibility. The code looks something like this:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8" />
- <title>HTML5 page with SVG Content</title>
- </head>
- <body>
- <p>This is the markup of an ordinary HTML5 page.</p>
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- width="400px" height="400px">
- <path fill="#5DD7FC" d="M0.5… /> <!—SVG document
- </svg>
- </body>
- </html>
Browser support for this technique is, not surprisingly, somewhat more limited:
| IE | Firefox | Chrome | Safari | Opera | iOS | Android |
|---|---|---|---|---|---|---|
| 9.0 | 4.0 and later | 7.0 and later | 5.1 and later | 11.6 and later | 5.0 | 3.0 and later |
All internal links, scripting and interactivity are preserved in this method.
Via the <object>, <iframe> or <embed> tags
The oldest methods, stemming from when native support for SVG in the browser was non-existent or limited. Commensurately also the best supported.
- <object type="image/svg+xml" data="twitter-icon.svg">
- Warning for older browsers, or alternative content
- </object>
- <embed type="image/svg+xml" src="twitter-icon.svg"
- pluginspage="http://www.adobe.com/svg/viewer/install/" />
- <iframe src="twitter-icon.svg">
- Warning for older browsers, or alternative content
- </object>
The methods above preserve all SVG features, and, as mentioned, have the greatest compatibility with IE (note that the Adobe SVG viewer linked to has not been updated for some time).
| IE | Firefox | Chrome | Safari | Opera | iOS | Android |
|---|---|---|---|---|---|---|
| 9.0 (6.0+ if using plugin) | All versions | 3.0 and later | ||||
As a font, via @font-face
As most fonts are vector shapes, SVG can be used to describe letter forms and embed them into web pages, as an alternative to the .woof, .otf and .eof formats. The CSS3 code looks something like this:
- @font-face {
- font-family: ‘GabbaGrabba’;
- url(‘gabbagabba.otf’) format(‘opentype’),
- url(‘gabbagabba.svg#gabba’) format(‘svg’);
- }
Sadly, Firefox and IE do not yet support the method, despite the other major browsers having a long history of doing so:
| IE | Firefox | Chrome | Safari | Opera | iOS | Android |
|---|---|---|---|---|---|---|
| No | All versions | 3.0 and later | ||||
Note that these techniques only cover SVG when it is used, or seen, directly on a webpage: there are many other possibilities (SVG filters on content, using Raphael or JQuery to display SVG images) that must be addressed in a separate article.
so we don't need the jQuery minimum length anymore:) cool!
