A huge pile of information about SVG.<\/p>\n
<\/p>\n
These are overview articles covering lots of stuff relating to SVG. Why to use it and the basics of how to use it. Mostly: SVG is particularly good for icons. Besides the resolution independence and styling possibilities, the shapes for icons are generally simple and thus the files size is tiny and can be combined into a single web request like a sprite or icon font.<\/p>\n I’ve written a bunch about this:<\/p>\n And more from others:<\/p>\n All that is based on inline SVG as a system, which is a fantastic way to go, but if you’re going down the SVG as CSS background-image…<\/p>\n And remember if you’re looking for SVG icons to use, anything vector can be made to work. You don’t have to specifically look for “SVG icons”. Even with icon fonts, you can activate that font locally, type the character you want the icon from, convert it to outlines, and save that out as SVG.<\/p>\n Here’s some web apps that export to inline SVG sprites:<\/p>\n In SVG you can The browser window you are looking at right now is a viewport. If there was an Whereas a Plus they work in IE 9 where CSS gradients do not.<\/p>\n The SVG is all about drawing shapes. Just as in a design program like Adobe Illustrator, you can apply strokes<\/strong> to those shapes as well as fills.<\/p>\n SVG has a <img><\/code>, background-image<\/code>, <svg><\/code>, <iframe><\/code>, and <object><\/code>\/<embed><\/code>.<\/p>\n\n
SVG as an Icon System<\/h3>\n
\n
<symbol><\/code> for icons<\/a><\/li>\n<use><\/code> with an external source<\/a>. Because it caches better. The trouble is IE, but SVG4Everybody fixes that. Alternatively, just Ajax in the whole chunk of SVG<\/a> and drop it in the document (mini library<\/a> for that). Microsoft Edge is maybe fixing this<\/a>.<\/li>\nfill<\/code> color<\/a> (i.e. making the icons match the text color they are near)<\/li>\n\n
<use><\/code> multiple times for the same icon, you can color each of them differently by applying a different fill<\/code> to the parent element and letting that cascade in. In order for that to work, you need to leave off the fill on the shape elements, meaning you’re mostly limited to single-color icons. You can get two colors though<\/a>, by utilizing currentColor<\/code>. You can also utilize native CSS variables<\/a> for even more power.<\/li>\n<use><\/code> Content<\/a> with CSS by Sara Soueidan<\/li>\n\n
\n
SVG Shape Syntax<\/h3>\n
\n
<path><\/code> element has its own micro-syntax. Chris Nager introduces that in Bespoke SVG Reference<\/a>.<\/li>\n<path><\/code> data by Sten Hougaard.<\/li>\n<marker><\/code> element) by Steven Bradley.<\/li>\nSVG Patterns<\/h3>\n
fill<\/code> shapes with colors and gradients, but you can also specify a <pattern><\/code> to fill<\/code> with. <pattern><\/code>s are groups of other SVG elements that repeat, so it’s kinda like putting some <svg><\/code> in your <svg><\/code>.<\/p>\n\n
<pattern><\/code>, but SVGeneration<\/a> creates SVG for use as background-image, some of which repeat like the idea of a pattern.<\/li>\nSizing SVG (viewport, viewBox, and preserveAspectRatio)<\/h3>\n
<iframe><\/code> on the page, that would have its own viewport. So too does <svg><\/code>! It’s a little tricky though, because SVG also has a viewBox<\/code> which is the actual space in which the SVG elements are drawn. That, combined with preserveAspectRatio<\/code>, determine how and where the SVG are drawn within that viewport.<\/p>\n\n
\n
SVG Gradients<\/h3>\n
fill<\/code> in SVG is just an attribute (or applied in CSS), SVG gradients are literally a special element: <linearGradient><\/code>. CSS has gradients as well, but because SVG gradients (can be) in the DOM, there might be cases where they are easier to manipulate.<\/p>\n\n
spreadMethod<\/code> and the animate values<\/code> attribute.<\/li>\nSVG and Fragment Identifiers<\/h3>\n
<use><\/code> element in SVG allows you to copy a bit of SVG for use again elsewhere. But that only works for inline SVG. If you wanted to use just particular bits inside an SVG file in CSS (background-image<\/code>) or HTML (<img><\/code>), you’ll need fragment identifiers.<\/p>\n\n
<img><\/code> and background-image<\/code><\/li>\nSVG Strokes<\/h3>\n
\n
stroke-linecap<\/code>, stroke-linejoin<\/code>, stroke-dashoffset<\/code>, etc)<\/li>\n\n
vector-effect: non-scaling-stroke;<\/code> (Demo<\/a>).<\/li>\n<\/ul>\nSVG and Text<\/h3>\n
<text><\/code> element which allows you to add (you guessed it) text to a graphic. Real, native web text, not outlines of characters, which 1) makes it more useful (selectable, searchable) 2) makes it more accessible 3) keeps the size down. Just like regular web text, the fonts you have available are limited to what is available on a given browser\/platform\/version or what is loaded via @font-face<\/code>.<\/p>\n\n
![Demo<\/a> from the specs<\/li>\nCan I use…<\/a> support<\/li>\n<\/ul>\nSVG Strokes<\/h3>\nSVG is all about drawing shapes. Just as in a design program like Adobe Illustrator, you can apply strokes<\/strong> to those shapes as well as fills.<\/p>\n\nUsing SVG stroke Attributes<\/a> by Joni Trythall (e.g. stroke-linecap<\/code>, stroke-linejoin<\/code>, stroke-dashoffset<\/code>, etc)<\/li>\nSVG Stroke<\/a> by Jakob Jenkov<\/li>\nStroke Properties<\/a> on W3.org<\/li>\nA popular animation technique is “drawing” the stroke of shapes:\n\nHow SVG Line Animation Works<\/a><\/li>\nAnimated line drawing in SVG<\/a> by Jake Archibald.<\/li>\nSVG Drawing Animation<\/a><\/li>\nPolygon feature design: SVG animations for fun and profit<\/a><\/li>\nWalkway.js<\/a> – “An easy way to animate SVG images consisting of line and path elements.”<\/li>\nLazy Line Painter<\/a> (jQuery plugin)<\/li>\nvivus<\/a><\/li>\n<\/ul>\n<\/li>\nSVG strokes normally scale relative to the viewport of the SVG, but they don’t have to, you can make sure they stay the width they are set to with vector-effect: non-scaling-stroke;<\/code> (Demo<\/a>).<\/li>\n<\/ul>\nSVG and Text<\/h3>\nSVG has a <text><\/code> element which allows you to add (you guessed it) text to a graphic. Real, native web text, not outlines of characters, which 1) makes it more useful (selectable, searchable) 2) makes it more accessible 3) keeps the size down. Just like regular web text, the fonts you have available are limited to what is available on a given browser\/platform\/version or what is loaded via @font-face<\/code>.<\/p>\n\n](\"http:\/\/www.w3.org\/Graphics\/SVG\/Test\/20011026\/linking-view-BE-04.svg#polygon-view\"){kind=link}