i is not valid SVG. You need to include the actual character that displays the icon. If you take a look at font awesome’s stylesheet you will see… .icon-group:before { content: “\f0c0”; } .icon-link:before { content: “\f0c1”; } .icon-cloud:before { content: “\f0c2”; } .icon-beaker:before { content: “\f0c3”; } .icon-cut:before { content: “\f0c4”; } .icon-copy:before { … Read more
Disclaimer: I’m the author of RealFaviconGenerator, which I expect to be up-to-date (mostly, see below). So don’t be surprised if this answer matches what RFG generates. The one-size-fits-all myth There is no “one size fits all” icon. You can’t create a single SVG icon and expect it to work everywhere. From a technical point of … Read more
In SVG transform is not hardware accelerated. They have around the same performance for single elements (in my experience). However, I use transform more to move thing around because in SVG not all elements have a x or y attributes, consider… <line x1=”0″ y1=”0″ x2=”100″ y2=”100″ /> <circle cx=”100″ cy=”100″ r=”100″ /> <path d=”M 0 … Read more
From what I understand SVG 2.0 is still a work in progress with no full browser implementation. For the more elusive features of SVG that may not be implemented by all browser you can check CanIUse to see if the feature is supported.
The SVG Parameter Variables Specification would do what you want but it’s unlikely ever to be completed, let alone implemented by UAs. Instead SVG looks like it will move towards attributes being CSS parameters at which point you could use CSS Calc. There is a light at the end of the tunnel for you though … Read more
Reference: <svg alt=””> <use xlink:href=”shapes.svg#circle”></use> </svg> <svg alt=””> <use xlink:href=”shapes.svg#square”></use> </svg> <svg alt=””> <use xlink:href=”shapes.svg#triangle”></use> </svg> shapes.svg: <?xml version=”1.0″ encoding=”UTF-8″ ?> <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”> <svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink”> <symbol id=”circle”> <circle cx=”100″ cy=”50″ r=”40″ stroke=”black” stroke-width=”2″ fill=”red” /> </symbol> <symbol id=”square”> <rect width=”100″ height=”100″ style=”fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)” /> </symbol> <symbol id=”triangle”> <line x1=”50″ y1=”0″ … Read more
I’ve been wondering this too, and I was pleasantly surprised to find that, according to the SVG spec, there is a specific function to return this info: getComputedTextLength() // access the text element you want to measure var el = document.getElementsByTagName(‘text’)[3]; el.getComputedTextLength(); // returns a pixel integer Working fiddle (only tested in Chrome): http://jsfiddle.net/jyams/
There actually is a built-in “Import” function which allows you to import your current set of icons and modify it:
This is a common issue with inline elements. To solve this, simply add vertical-align:top. UPDATED EXAMPLE HERE #foo { background: #fff; vertical-align:top; } It’s worth noting that the default value for the vertical-align property is baseline. This explains the default behavior. Values such as top, middle, and bottom will correct the alignment. Alternatively, you could … Read more
Try this <script xlink:href=”https://stackoverflow.com/questions/1797203/file_name” />