SVG FAQ
What is SVG?
SVG ( Scalable Vector Graphics ) is an W3C specification whose XML based grammar defines instructions for rendering rich, interactive, and powerful graphics as well as multi-media applications.
Scalable means that unlike raster images ( pixels / dots ) that get all distorted and fuzzy as they are stretched browsers can easily render an SVG image in any size ( Scalable ) and have it look just as good.
Vector is basically a geek word for lines.
Unlike raster image formats, SVG contains not the image itself (dots)
but rather a set of human readable XML elements that tell the browsers where and how to actually draw the vectors ( lines ) and such that comprise the image.
What are the uses of SVG?
SVG is currently used in a wide and growing number of contexts and put to some rather amazing applications.
Some of the more common applications include:
- Web graphics
- With ever improving inter operation with other w3.org standards like CSS,XSL,XML and such, your images can actually respond to the environment in which they are viewed.
- logos
- Creating logos and keeping them up to date in all the sizes needed is far easier when it all can be the same image scaled to fit.
- online maps
- There has been an intense interest from the GIS and mapping communities as in many instances an SVG map takes but a fraction of the bandwidth of a raster map.
( Even Googlemaps has an SVG option ). The elemental nature of SVG also makes it very straight forward to make a map interactive and to overlay data. - Graphical User Interfaces for WebApps
- Conceptually an SVG application affords the web author a standards based approach to producing applications once restricted to venues like macromedia's flash.
- Charting and other data visualization
- The fact that SVG is based upon XML means that merging data dynamically with a drawing is about as simple as XSL. This means that the same SVG chart drawing could be used for multiple reports like a template.
Where is SVG being used?
SVG is used a lot on the web (Google Maps, Wikipedia, just to name a few) and also on most mobile phones (MMS,skins,web). For an extensive overview see svg.startpagina.nl.
Why doesn't my SVG show an image?
The problem could be:
- the server: MIMEtype not image/svg+xml, in case of svgz also the encoding has to be set correctly
- code not XML (not well-formed)
- code not identifying itself as SVG: namespace declaration needed
- code missing xlink namespace declaration, while links are used
- code rendered off screen, you're looking at an 'empty' part of the drawing. go set the viewBox
- At t=0 there's supposed to be no image, and after that it's supposed to be changed by JavaScript or SMIL. Some viewers however don't support either of them, or have JavaScript turned off
- Elements or the stroke with which they are drawn are just too small to see.
- Colors are too difficult to distinguish
- you are using something that your viewer doesn't implement (yet); your viewer is not complete
Why do SVG files on my server render as raw text XML?
You probably have the wrong ((MIME Type)).
Why does my SVG not work in some SVG viewer?
If your ((MIME Type)) is correct (see above), it may be that your document is not correct, or that the viewer does not support some feature of your SVG (such as animation or script). Make sure that you have the correct ((Namespace)) in your document root. Some versions of Internet Explorer have a bug that needs a URL to end with ".svg".
How can I move one element above another? Does SVG have a z-index?
SVG does not have a z-index attribute. To achieve this effect, see ((Rendering Order)).
How can I generate SVG serverside?
There are a variety of methods, depending on the language. See ((Serverside Generation)).
How do I wrap text in SVG?
In SVG1.2, there will be native capability to do textwrapping; on earlier versions, you must use or . See ((Text Wrapping)) for details.
