SVG

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



Specification


EXAMPLES

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg height="100%" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradientA">
      <stop offset="0%" style="stop-color:yellow;"/>
      <stop offset="100%" style="stop-color:red;"/>
    </linearGradient>
    <linearGradient id="gradientB">
      <stop offset="0%" style="stop-color:green;"/>
      <stop offset="100%" style="stop-color:blue;"/>
    </linearGradient>
  </defs>
  <g>
    <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)"/>
  </g>
</svg>

Try this example here




Tools


Resources

JavaScript

Raphael

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.

Flash

Java


Tutorials


External Links


References

  1. W3C page on SVG: http://www.w3.org/Graphics/SVG/
  2. SVG-edit: http://code.google.com/p/svg-edit/
  3. wikipedia: Inkscape
  4. wikipedia: Sodipodi
  5. Inkscape wiki entry "in memory" of Sodipodi: http://wiki.inkscape.org/wiki/index.php/SodiPodi
  6. Fills & Strokes in SVG: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
  7. CSS .vs. SVG styling checkboxes & radio buttons: https://theblog.adobe.com/css-vs-svg-styling-checkboxes-and-radio-buttons/
  8. I <3 Raphael: http://www.trottercashion.com/2010/04/22/i-heart-raphael.html
  9. How do you detect support for VML or SVG in a browser: http://stackoverflow.com/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browser
  10. Morph anything with GSAP MorhSVG / AI : https://codepen.io/alaricweb/post/single-path-morph-svg
  11. Can I change the fill color of an svg path with CSS?: https://stackoverflow.com/questions/9529300/can-i-change-the-fill-color-of-an-svg-path-with-css
  12. CSS Link Hack in SVG: http://schepers.cc/css-link-hack-in-svg
  13. SVG as external file and use of CSS: https://www.sitepoint.com/community/t/svg-as-external-file-and-css/196311
  14. Changing SVG icon color and size via CSS?: https://github.com/filamentgroup/grunticon/issues/235
  15. Lets make your SVG symbol icons multi-colored with CSS variables: https://medium.freecodecamp.org/lets-make-your-svg-symbol-icons-multi-colored-with-css-variables-cddd1769fca4
  16. SVG `use` with External Source: https://css-tricks.com/svg-use-external-source/

See Also

XML | Image | Photos | Animation