SVG

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".

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

Specification

• SVG 1.1: https://www.w3.org/TR/SVG/
• SVG 2.0 DRAFT: https://svgwg.org/svg2-draft/

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

• SVG to HTML5 Canvas Converter: http://professorcloud.com/svg-to-canvas/
• GRAVIT -- online SVG Drawing tool: https://designer.gravit.io
• svg-edit -- A complete vector graphics editor in the browser: http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html
• Inkscape: https://inkscape.org/en/ (open source SVG image editor)
• SodiPodi: http://sourceforge.net/projects/sodipodi/ (predecessor to Inkscape, which took over in 2004)
• SVG encoded as CSS background-image: https://codepen.io/shshaw/full/rrOZQQ
• Minify SVG files with gulp: https://github.com/ben-eb/gulp-svgmin
• SVG sprites: https://github.com/jkphl/gulp-svg-sprite
• Adobe SVG viewer: https://www.adobe.com/devnet/svg/adobe-svg-viewer-download-area.html (legacy plugin from 1998-2005 for rendering SVG in the browser, before it was supported at all, or fully, in the major browsers)
• SVG-OMG: https://jakearchibald.github.io/svgomg/ | SRC (Web-based UI for NodeJS SVG imaging tool SVGO)

Resources

• UnDraw: https://undraw.co/illustrations (free/OSS SVG-based illustrations for any idea you can imagine and create)
• Mozilla Dev Network (MDV) -- SVG - Scalable Vector Graphics: https://developer.mozilla.org/en-US/docs/Web/SVG
• SVG Reference: http://www.w3schools.com/svg/svg_reference.asp
• Can I Use - SVG: https://caniuse.com/#feat=svg (hit "Show All" to see all major browser versions, support at this point is unanimous and quite staggeringly complete for a while now)
• SVG on the web: https://svgontheweb.com/
• Rich SVG UI Components: http://wiki.netbeans.org/MobilityDesignerRichComponents
• SVG or Canvas? Сhoosing between the two: http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/
• Adobe blog -- CSS .vs. SVG - the final roundup: https://theblog.adobe.com/css-vs-svg-the-final-roundup/

JavaScript

• SVG for Everybody: https://jonathantneal.github.io/svg4everybody/ | DEMO | SRC
• Killer SVG Workflow: http://mattsoria.com/killersvgworkflow/ | DEMO
• Snap.svg: http://snapsvg.io/ | DEMO | SRC | PLUGIN-AdobeAnimator (the JavaScript SVG library for the modern web)
• jQuery SVG: http://keith-wood.name/svg.html (Keith Wood has ported most of SVG's main features into a jQuery plugin)

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.

• Raphael.js: http://raphaeljs.com/

Flash

• svgweb -- Scalab+96le Vector Graphics for Web Browsers using Flash: http://code.google.com/p/svgweb/

Java

• Batik SVG Toolkit (Apache): http://xmlgraphics.apache.org/batik/
• "SVG Shape 2 Java2D" code generator: https://jasperpotts.com/blog/2007/07/svg-shape-2-java2d-code/ | DOWNLOAD | SRC
• Flamingo SVG Transcoder: http://ebourg.github.io/flamingo-svg-transcoder/ (forked from "SVG Shape 2 Java2D" for Java 8+ changes to Java2D path syntax and a few more features)

Tutorials

• Using SVG: https://css-tricks.com/using-svg/
• Scalable Vector Graphics (SVG) tutorial: http://tutorials.jenkov.com/svg/index.html
• W3schools -- SVG tutorial: https://www.w3schools.com/graphics/svg_intro.asp
• Mega list of SVG info: https://css-tricks.com/mega-list-svg-information/
• A Complete Guide to SVG Fallbacks: https://css-tricks.com/a-complete-guide-to-svg-fallbacks/
• SVG Fallbacks: https://css-tricks.com/svg-fallbacks/
• Adobe Illustrator export to SVG (best practice): https://css-tricks.com/illustrator-to-svg/
• SVG Text typographic designs: https://css-tricks.com/svg-text-typographic-designs/
• Icon System with SVG Sprites: https://css-tricks.com/svg-sprites-use-better-icon-fonts/
• Data URIs: https://css-tricks.com/data-uris/
• Probably Don’t Base64 SVG: https://css-tricks.com/probably-dont-base64-svg/
• Create vector graphics in the browser with SVG: http://www.ibm.com/developerworks/xml/tutorials/x-svggraphics/
• Practical business graphing with SVG and XML: http://www.ibm.com/developerworks/xml/library/x-graphxmlsvg/
• Interactive SVG on the iPad: http://techblog.floorplanner.com/2010/08/30/interactive-svg-for-the-ipad/
• SVG Rotating Wheel Interface (with Clipping Paths and Scalable 2D Motion Graphics): http://css.dzone.com/articles/svg-tutorial-clipping-paths
• Inkscape SVG tips and tricks: http://inkscape.org/doc/tips/tutorial-tips.html
• Inkscape SVG basic tutorials: http://inkscape.org/doc/basic/tutorial-basic.html
• Basic SVG Animation: http://msdn.microsoft.com/en-us/library/gg193979(v=vs.85).aspx
• A Bit of SVG and Canvas: http://nimbupani.com/bit-of-svg-and-canvas.html
• SVG - Evolution, Not Revolution: http://dev.opera.com/articles/view/svg-evolution-not-revolution/
• SVG Evolution 2 - Our First Steps Into SVG: http://dev.opera.com/articles/view/svg-evolution-2-our-first-steps-into-sv/
• SVG Evolution 3 - Applying Polish: http://dev.opera.com/articles/view/svg-evolution-3-applying-polish/
• Client Side SVG generation using XSLT (from XML): http://www.surguy.net/articles/client-side-svg.xml
• Creating a Touch Enabled SVG UI for Java ME Devices: http://www.netbeans.org/kb/docs/javame/svgtouch.html
• Bringing SVG Power to Java Applications: http://java.sun.com/developer/technicalArticles/GUI/svg/
• Java JAXP, Creating Graphics Using Java and SVG: http://www.developer.com/java/other/article.php/3655506/Java-JAXP-Creating-Graphics-Using-Java-and-SVG.htm#Figure_4
• SVG Image and Background Image Replacer: http://my.opera.com/Fyrd/blog/svg-image-and-background-image-replacer
• Detecting SVG support in JavaScript: http://thomas.tanrei.ca/svg-detection.html
• VBscript to detect SVG Viewer: http://www.design-ireland.net/?http%3A//www.design-ireland.net/article/Detecting_the_SVG_Viewer
• SVG animation with SMIL: http://https://developer.mozilla.org/en/SVG/SVG_animation_with_SMIL
• Bike to School - The Process (SVG animation tutorial): https://codepen.io/MarioD/post/bike-to-shool-the-process
• Cascading SVG Fill Color: https://css-tricks.com/cascading-svg-fill-color/
• CSS with SVG -- Real World Usage: https://www.sitepoint.com/css-with-svg/
• How SVG Shape Morphing Works: https://css-tricks.com/svg-shape-morphing-works/
• A Comprehensive Guide to Clipping and Masking in SVG: https://webdesign.tutsplus.com/tutorials/a-comprehensive-guide-to-clipping-and-masking-in-svg--cms-30380
• How To Export SVGs For The Web From Illustrator: https://codepen.io/colinlord/post/export-svgs-for-web-from-illustrator
• How to Hand Code SVG: https://webdesign.tutsplus.com/tutorials/how-to-hand-code-svg--cms-30368
• Styling SVG <use> Content with CSS: https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/
• How to style SVG with external CSS?: https://stackoverflow.com/questions/18434094/how-to-style-svg-with-external-css
• Styling & animating SVG with CSS: https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/
• How do I test an SVG fallback?: https://stackoverflow.com/questions/34625088/how-do-i-test-an-svg-fallback
• SVG `use` with External Reference, Take 2: https://css-tricks.com/svg-use-with-external-reference-take-2/
• How you can use (SVG and) simple Trigonometry to create better loaders: https://uxdesign.cc/how-you-can-use-simple-trigonometry-to-create-better-loaders-32a573577eb4
• Building a responsive image in SVG -- How to create a logo that responds to its own aspect ratio: https://medium.com/9elements/building-a-responsive-image-e4c6229fa1f6
• 5 Gotchas You’re Gonna Face Getting Inline SVG Into Production: https://css-tricks.com/gotchas-on-getting-svg-into-production/
• A Guide to SVG Animations (SMIL): https://css-tricks.com/guide-svg-animations-smil/
• How I stopped worrying and learned to animate SVG: https://medium.com/@aniboaz/animate-svg-4fa7dd00e860
• SVG - <animate>: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate
• How to Get SVG Thumbnails in File Explorer on Windows 10: https://www.howtogeek.com/706621/how-to-get-svg-thumbnails-in-file-explorer-on-windows-10/ (enabled by default when adding "PowerToys")
• SVG animated play/pause button: https://codepen.io/rchaider/pen/zvJpLV

External Links

• wikipedia: SVG
• wikipedia: Vector graphics
• SVG Open conference: http://www.svgopen.org
• SVG Open 2010 - Abstracts, Proceedings and Presentation Files: www.svgopen.org/2010/registration.php?section=abstracts_and_proceedings (purportedly the best year for SVG yet)
• SVG At the Movies: http://www.xml.com/pub/a/2004/10/13/sacre.html
• Electronic Program Guides using SVG: http://www.svgopen.org/2010/presentations/59-SVG_Electronic_Program_Guides/index.pdf
• BBC To Use Simplicity of EPG For Better Internet Connected TV Service: http://www.worldtvpc.com/blog/bbc-epg-internet-connected-tv-service/
• iPlayer Streaming May Soon Require License To View: http://www.worldtvpc.com/blog/iplayer-streaming-require-license-view/
• SVG Chess: http://www.svgarena.org/chess.html
• An SVG Solitaire Game: www.svgarena.org/solitaire.html
• SVG Video Demo: http://www.bluishcoder.co.nz/2007/08/svg-video-demo.html
• SVG Salamander: http://svgsalamander.java.net/
• Real time monitor in SVG, a use case in Machining Technology HMI: http://www.svgopen.org/2008/papers/47-Real_time_monitor_in_SVG_a_use_case_in_Machining_Technology_HMI/
• New NetBeans Plugin - SVG 2 FXML: http://88.198.17.44/blog/2012/06/06/new-netbeans-plugin-svg-2-fxml/
• The Art Of The SVG Filter (for text) And Why It Is Awesome: http://www.smashingmagazine.com/2015/05/26/why-the-svg-filter-is-awesome/
• SVG Text Portrait example: https://codepen.io/lisilinhart/pen/MQVgKG
• SVG rendering offset in Chrome: https://stackoverflow.com/questions/41868944/svg-rendering-offset-in-chrome

See Also

XML | Image | Photos | Animation