FileNav

online
online: /HTML & CSS/Vector_Graphics.md

Vector Graphics

Browser SVG Support

Version Triden Gecko WebKit Presto KSVG
SVG 1.0 ?
SVG 1.1 5.0 (p) (p) (p) (p) (p)
SVGB (SVG 1.1 Basic) 5.0 (p) (p) (p) (p) (p)
SVGT (SVG 1.1 Tiny) 5.0 (p) (p) (p) 1.0 (p)
SVG 1.1+ Tiny ? ? ? ?
SVGT (SVG 1.2 Tiny) – – 2.1 –
SVG 2.0 ? ? ? ? ?
SVGZ ?
sXBL –
XBL 2.0 –
Version Chrome FF IE Safari Opera
SVG 1.0
SVG 1.1
SVGB (SVG 1.1 Basic) 4.0 3.0 9.0 3.2 9.0
SVGT (SVG 1.1 Tiny) 8.0
SVG 1.1+
SVGT (SVG 1.2 Tiny) 9.5
SVG 2.0 ? ? ? ? ?
SVGZ 9.5
Version Android Blackberry Chrome FA FF FA IE Mobile iOS Opera Mini Opera Mobile
SVG 1.0
SVG 1.1
SVGB (SVG 1.1 Basic) 3.0 7.0 all all 9.0 3.2 5.0 10.0
SVGT (SVG 1.1 Tiny)
SVG 1.1+
SVGT (SVG 1.2 Tiny)
SVG 2.0 ? ? ? ? ? ?
SVGZ

Embedding

Desktop

Version Chrome / WebKit FF / Gecko IE / Triden KHTML / KSVG Safari / WebKit Opera / Presto
<img> 4.0 / (p) 4.0 / 2.0 9.0 / 5.0 ? / – 4.0 / (p) 9.0 / 2.1
<embed> 5.0 / (p) 2.0 / 1.8 (p) / 5.0 ? / (p) (p) / (p) (p)
<object> 5.0 / (p) 2.0 / 1.8 (p) / 5.0 ? / (p) all / (p) (p) / all
Inline <svg> 7.0 / ? 4.0 / 2.0 9.0 / 5.0 ? / ? 5.1 / ? 11.6 / ?
CSS background-image 5.0 / – 4.0 / 2.0 9.0 / 5.0 ? / – 2.1 / – – / 2.1
CSS list-style-image 5.0 / (p) 4.0 / 2.0 (p) / 5.0 ? / – 2.1 / (p) – / 2.1
FavIcon – / – (p) – / – ? / – 2.1.1 / – – / 2.1.1
Data URI 5.0 / (p) all (p) / 5.0 ? / ? – / (p) ? / –

Mobile

Version Android Blackberry Chrome FA FF FA IE Mobile iOS Opera Mini Opera Mobile
<img> 3.0 5.0 all all 10.0 2.1 5.0 10.0
<embed> 5.0 1.8 (p) (p) (p)
<object> 5.0 1.8 (p) all (p)
Inline <svg> 3.0 7.0 all all 10.0 5.0 – 12.0
CSS background-image 3.0 7.0 all 2.0 – 2.1 – 16.0
CSS list-style-image 5.0 2.0 (p) 2.1 –
FavIcon – (p) – 2.1.1 –
Data URI 5.0 all (p) – ?

Desktop

Feature Chrome FF IE Safari Opera Notes
Canvas Basic Support 4.0 2.0 9.0 3.1 9.0 ‐
Icon Font 4 3.5 (TTF) 5.0 (EOT) 3.1 10 ‐
Icon Font (WOFF) 5 3.6 9.0 5.1 11 ‐
SVG <object> 4.0 2.0~ / 3.0 * 9.0 3.1~ / 3.2 9.0 ‐
SVG <img> 4.0 4.0 9.0 3.2~ / 4.0 9.0 ‐
SVG <svg> 7.0 4.0 9.0 5.1 11.6 ‐
SVG CSS Background 4.0~ / 5.0 4.0~ / 24.0 9.0 3.2~ / 5.0 9.5 *
SVG filters 5.0~ / 8.0 3.0 10.0 6.0 9.0 **
SVG SMIL animation 4.0~ / 5.0 4.0 ‐ 4.0~ 9.0 †
SVG fragment identifiers ? 15.0 10.0 ‐ ‐ ‐
SVG fonts 4.0 ‐ ‐ 3.2 9.0 ‐
*
Partial support in older Firefox and Opera Mini/Mobile refers to SVG images being blurry when scaled. Partial support in iOS Safari and older Safari versions refers to failing to support tiling or the background-position property.
**
Older versions of Chrome and Safari do not support feConvolveMatrix and their lighting implementation is incomplete.
†
Partial support in Safari refers to not working in HTML files.

Mobile

Feature Android Blackberry Chrome FA FF FA IE Mobile iOS Opera Mini Opera Mobile
Canvas Basic Support 2.1~ / 3.0 7.0 31.0 25.0 10.0 3.2 5.0–7.0 10.0
Icon Font 2.2 (TTF) 6 (TTF) all all 10.0 (EOT/TTF/OTF) 3.2 (SVG) none 10.0
Icon Font (WOFF) 4.4 7.0 all 25.0 10.0 5.0 none 11.0
SVG <object> 3.0 7.0 31.0 25.0 10.0 3.2 5.0-7.0 10.0
SVG <img> 3.0 7.0 32.0 25.0 10.0 4.0 5.0-7.0 10.0
SVG <svg> 3.0 7.0 32.0 25.0 10.0 5.0 ‐ 12.0
SVG CSS Background 3.0 7.0 all 25.0 10.0 3.2~ / 4.2 5.0~ 10.0~ / 16.0
SVG filters 4.4 10.0 all 25.0 10.0 6.0 5.0 10.0
SVG SMIL animation 3.0 7.0 all 25.0 10.0??? 3.2~ ‐ 10.0
SVG fragment identifiers ‐ 10.0 ‐ 25.0 10.0 ‐ ‐ ‐
SVG fonts 3.0 7.0 18.0 ‐ ‐ 3.2 ‡ 10.0
~
A tilde indicates partial support
‡
Supported in Opera Mini in SVG images only, not in HTML.
Chrome FA
Chrome for Android beta was initially made available for Android 4 (ICS) devices and was launched 2012-02-07.
Profile Module Element Trident Gecko WebKit Presto KSVG Prince XML Amaya Adobe SVG Viewer Batik Renesis
Tiny Structure Module svg 5.0[t 2] 1.8 522 1.0 Yes Yes Yes 1.0 Yes Yes
Tiny Structure Module g 5.0[t 2] 1.8 522 2.0 Yes Yes ? 1.0 Yes 1.0
Tiny Structure Module defs 5.0[t 2] 1.8 522 2.0 Yes 6.0 ? 1.0 Yes 1.0
Tiny Structure Module desc 5.0[t 2] 1.8 522 2.0 No No ? 1.0 Yes 1.0
Tiny Structure Module title 5.0[t 2] 1.8 522 2.0 No No ? 3.0 Yes 1.0
Tiny Structure Module metadata 5.0[t 2] 1.8 522 2.0 ? No ? 2.0 Yes 1.0
Tiny Structure Module use 5.0[t 2] 1.8 Yes[w 4] 2.0 No 6.0 Yes 1.0 Yes 0.6
Tiny Conditional Processing Module switch Yes 1.8 522 2.0 ? No ? 2.0 Yes No
Tiny Image Module image 5.0[t 2] 2.0[g 5] 522 2.0 No 5.1 4.0 1.0 Yes 0.5
Tiny Style Module style 5.0[t 1] 1.8 522 2.0 ? Yes Yes 1.0 Yes 0.6
Tiny Shape Module circle 5.0[t 2] 1.8 522 2.0 Yes Yes 4.0 1.0 Yes 1.0
Tiny Shape Module ellipse 5.0[t 2] 1.8 522 2.0 Yes Yes 4.0 1.0 Yes 1.0
Tiny Shape Module line 5.0[t 2] 1.8 522 2.0 Yes Yes 4.0 1.0 Yes 1.0
Tiny Shape Module path 5.0[t 2] 1.8 522 2.0 Yes Yes 4.0 1.0 Yes 1.0
Tiny Shape Module polygon 5.0[t 2] 1.8 522 2.0 Yes Yes 4.0 1.0 Yes 1.0
Tiny Shape Module polyline 5.0[t 2] 1.8 522 2.0 Yes Yes 4.0 1.0 Yes 1.0
Tiny Shape Module rect 5.0[t 2] 1.8 522 2.0 Yes Yes 4.0 1.0 Yes 0.6
Tiny Text Module text 5.0[t 1] 1.8 522 2.0 Yes 5.1 4.0 1.0 Yes 0.7
Tiny Hyperlinking Module a Yes 1.8 522 1.0 Yes 5.1 8.2 1.0 Yes 0.6
Tiny Scripting Module script Yes 1.8 522 2.0 ? ? ? 1.0 Yes 0.5

Animation Module Tiny animate No 2.0[g 12] No 2.0 Yes No Yes 1.0 Yes No set Partial animateMotion 2.0[g 13] No animateTransform 2.0[g 12] animateColor (deprecated) No[g 14] Yes mpath 2.0[g 13] 522 ? ? 2.0

Font Module Tiny font No No[g 15] Yes 2.0 ? ? ? 2.0 Yes 1.0 font-face 1.0 ? ? ? Dropped[note 5] glyph ? ? ? 1.0 missing-glyph ? ? ?

Profile Module Element Trident Gecko WebKit Presto KSVG Prince XML Amaya Adobe SVG Viewer Batik Renesis
Basic Structure Module symbol 5.0[t 2] 1.8 522 2.0 No 6.0 ? 1.0 Yes 0.6
Basic Text Module tspan 5.0[t 1] 1.8 522 2.0 Yes Yes 4.0 1.0 Yes 0.7
Basic Text Module tref 5.0[t 1] No[g 6] 522 2.0 Yes No 6.3 1.0 Yes 0.6
Basic Text Module textPath 5.0[t 1] 1.8.1 522 2.0 Yes No 4.0 1.0 Yes No

Full altGlyph Partial[g 7][g 8] Partial 2.2 ? 2.0 altGlyphDef No No ? altGlyphItem ? ? No glyphRef 2.2 ? 2.0

Profile Element Trident Gecko WebKit Presto KSVG Prince XML Amaya Adobe SVG Viewer Batik Renesis

Marker Module Full marker 5.0[t 1] 1.8 522 2.0 ? 6.0 ? 3.0 Yes 1.0

Color Profile Module Full color-profile No No[g 9] No[w 5] No No No ? 3.0 Yes No

Gradient Module Basic linearGradient 5.0[t 1] 1.8 522 1.0 Yes 6.0 ? 1.0 Yes 0.5 radialGradient 2.0 ? stop 1.0 ? ?

Pattern Module Basic pattern 5.0[t 1] 1.9 522 2.0 Yes ? ? 2.0 Yes 0.5

Clip Module Basic clipPath 5.0[t 1] 1.8 Mostly[w 6] 2.0 ? ? ? 1.0 Yes 0.6

Mask Module Basic mask 5.0[t 1] 1.9 522 2.0 ? ? ? 1.0 Yes No

Filter Module Basic feBlend 6.0[t 3] 1.9 Nightly build[w 7] 2.0 ? No ? 1.0 Yes No feColorMatrix ? ? feComponentTransfer ? ? feComposite ? ? feFlood ? ? feGaussianBlur ? ? feImage ? ? feMerge ? ? feOffset ? ? feTile ? ? Full filter Nightly build[w 7] ? ? feConvolveMatrix Nightly build[w 8] ? ? feDiffuseLighting Nightly build[w 9] ? ? feDisplacementMap Nightly build[w 7] ? ? feMergeNode ? ? feMorphology ? ? feSpecularLighting Nightly build[w 10] ? ? feTurbulence Nightly build[w 11] ? ? feDistantLight No ? ? fePointLight ? ? feSpotLight ? ? feFuncR Nightly build[w 7] ? ? feFuncG ? ? feFuncB ? ? feFuncA ? ?

Profile Element Trident Gecko WebKit Presto KSVG Prince XML Amaya Adobe SVG Viewer Batik Renesis

Cursor Module Full cursor No[t 4] No[g 10] Partial No ? ? ? No Yes 0.6

View Module Basic view No 15.0[g 11] Partial 2.0 ? ? ? 3.0 Yes No

Font Module Full hkern Nightly build[w 12] 2.0 ? ? ? No vkern Nightly build[w 13] ? ? ? font-face-src Yes No ? ? ? No font-face-uri 2.0 ? ? ? font-face-format No ? ? ? No font-face-name ? ? ? Yes

Extensibility Module Full foreignObject No 1.9 522 2.0 ? No 7.2 No No No

Font Icons

With the excellent of browser support of WebFonts using icon fonts for flat graphics is a hyper efficient system to deploy such graphics.

Font Icon Generators

SVG (Scalable Vector Graphics)

<object type="image/svg+xml" data="/img/banner.svg" width="400" height="300">
    <h1>Styled Fallback Text</h1>
</object>

<img src="/img/banner.svg" type="image/svg+xml" width="400" height="300" alt="Fallback Text?" />

SVG Tools

SVG vs. Canvas