From BC$ MobileTV Wiki
Jump to: navigation, search

Scalable Vector Graphics (commonly abbreviated SVG) is a technology for creating and displaying images. The technology is primarily intended for, and in use by, Client-Side Web Browsers and Web Application developers. According to W3C, it is a: "modularized language for describing two-dimensional vector and mixed vector/raster graphics in XML".[1]

Canvas, Flash and SVG Mobile Comparison (2010) is shown to the right



<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg height="100%" version="1.1" width="100%" xmlns="">
    <linearGradient id="gradientA">
      <stop offset="0%" style="stop-color:yellow;"/>
      <stop offset="100%" style="stop-color:red;"/>
    <linearGradient id="gradientB">
      <stop offset="0%" style="stop-color:green;"/>
      <stop offset="100%" style="stop-color:blue;"/>
    <ellipse cx="110" cy="100" rx="100" ry="40" style="fill:url(#gradientA); stroke:rgb(0,0,100); stroke-width:2"/>
    <circle cx="110" cy="100" r="30" style="fill:url(#gradientB)"/>

Try this example here





Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.




External Links


  1. W3C page on SVG:
  2. SVG-edit:
  3. wikipedia: Inkscape
  4. wikipedia: Sodipodi
  5. Inkscape wiki entry "in memory" of Sodipodi:
  6. Fills & Strokes in SVG:
  7. CSS .vs. SVG styling checkboxes & radio buttons:
  8. I <3 Raphael:
  9. How do you detect support for VML or SVG in a browser:
  10. Morph anything with GSAP MorhSVG / AI :
  11. Can I change the fill color of an svg path with CSS?:
  12. CSS Link Hack in SVG:
  13. SVG as external file and use of CSS:
  14. Changing SVG icon color and size via CSS?:
  15. Lets make your SVG symbol icons multi-colored with CSS variables:
  16. SVG `use` with External Source:

See Also

XML | Image | Photos | Animation