This text is written as the edit date says. I am purely focussing on current browsers.

30sec Intro (links mostly)

SVG 1 is a nice image format for multiple screen sizes, as its vector 2; secondly its XML, so hackable from JS examples examples of capacity from JS a real world map, and another. These days all browsers support SVG without awkward tech problems 3. SVG is better than HTML5 Canvas, as it support events better. There is a more discussion 4 5. SVG images are seen by the browser as a small subdocument, with an editable DOM 6. A random history article 7. As SVG is a w3C invention, a good source of spec news is of course w3c 8

However this boring info that can be gained from any wordpress techblog is dull, and easy. Pls refer to the examples link if you are after inspiration.

Some SVG editing libraries

  • Inkscape (previously named Sodipodi) 9 sodipodi project, inkscape project is run on BZR, and I can't find the repo. This is a desktop application, mostly written for Linux, although it runs on other OS. It is OSS (GPL), and may be deployed without a charge. I put this item here, as for quick edits to existing files, this is the best solution. As a Linux user, install via apt-get, dnf etc. Tools for other OS may vary e.g. 10.
  • svg-edit 11 is a google project, with MIT licence. It runs purely in a recent browser, and is an alternative to inkscape, if you can't use that. It is a mature project, that doesn't seen to have any recent movement.
  • Raphaël ~ pls note UTF8 name ~ docs and is MIT license. This is an old JS project 12, it is compared 13. It has an O'Reilly book. It supports a version of data binding (remember this predates Angular by several years)
  • SVG.js 14, 15 MIT license. I have never used this. This is designed to be small, and not have dependencies, quoting 16. The project has an eponymous twitter channel.
  • jquery.svg 17 18, MIT license, to clarify, code by Keith Wood (This projects has many forks). This project hasn't been touched in three years. Code does not have unit tests, and there are un-merged branches, which add more recent technologies.
  • jquery-drawsvg 19 is a tool to slowly render an SVG, as an animation 20. It doesn't include features to change an SVG.
  • jquery-svg 21 MIT license, a plugin to “A lightweight jQuery plugin to apply css styles and js scripts to a SVG which is embedded (using the <object> tag” (quoting the last link). Read the code, its a simple class. Obviously this class can be merged with other classes to achieve more complex behaviour; this doesn't directly have document editing (reference: oab1 test code)
  • snapsvg 22, under Apache2 license. This is quite a large and well-documented library, that for example defines some maths functions (but in degrees not radians) 23. It seems to be owned by Adobe Inc (see github account) 24, and they demand paper address of any contributors. As an older project, there are many open tickets.
  • vivus 25 26 released under MIT, this is a narrow small SVG animation library. This is designed to be small and standalone, without dependencies. It doesn't have support for text animation (via text elements), and fills will come-up wrong.

Actual notes

I wrote this article as I needed to adjust an SVG already created in JS. There is a wide variety of libraries, mostly written to address a particular problem. This is quite a narrow article. Practical demonstration shows that SVGs are a less stable technology for complex activities (maybe they always will be, as what I am doing is quite complex). For comparison it took JS + CSS about 10 years to mature; and that is much more widely used scenario. In order to update the SVG element without graphical glitches, I needed to delete the element and inject a new one.
SVG animation should be a replacement for flash animation. It has similar features (compare 27 28 and 29 - nb this is a spec), ignoring out of scope items like things like playing sound. As the tech platform is directly tied to JS, additional features like websockets are easily accessible. As text encoded formats, JS + SVG are better for MIT style 'hacker'/ graphics hack cultures. Not being flash means there are many security and update problems that are irrelevant. Javascript is strictly designed to allow random people to run code on each client PC.
SVG + JS have a different focus to GIF animation. Currently GIFs are mostly used for downsampled video clips; which is not a good deliverable for SVG + JS. Obviously SVG can be animated with CSS3 30 31, but this is not the focus of this text.
The spec for SVG supports some animation 32
There are some articles of useful material published 33 34 35. D Dailey is holding a collection of material 36, pulling out 37, last updated AFAIK in 2013, with similar material to this article. This article is old 38, but is very useful for demoing viewport problems. As SVG is XML, it is fairly low density data encoding; as such it should always be wrapped in GZIP (google for references for your specific tech stack).
A while ago, there was a thing called SMIL ~ Synchronized Multimedia Integration Language 39 40 41. Microsoft helpfully publish “how to SMIL on ms browsers” 42


The following section is fitting SVG into the structures/ architecture of other graphics systems.

  • SVG colours are encoded in sRGB 43 (relationship between these 44). sRGB is supposed by be “the simple solution, acting like a windows computer”.
  • SVG uses a similar but different CSS instructions 45. SVG has quite good font support 46.
  • As a 2D or 3D 47 48 modelling system, SVG needs several co-ordinate notations. Summarising viciously, to use SVG, define polygons in a set of [I suppose document] co-ordinates 49, apply any transforms 50 or clipping 51 for artistic direction; then apply to screen co-ordinates to be able to define pixels. Here is a guide for people with less maths 52 53 54 55.
  • Poorly organised SVG generators will lead to excessive file size volumes. Solutions obvious to webdev are listed in 56 57. I reference Scour 58 as a focussed reference, or svg-optimiser.
  • SVG supports several different methods for representing curves, TinySVG (for mobile) supports Bézier and elliptical curves 59, the SVG spec mentions quadratic and cubic Bézier curves 60 in addition.
  • As part of drawing for 3D, or just stacked polygons, the SVG spec has depth sorting. SVG2 61 is tightly related to CSS2 z-index. SVG1 62 defines many custom attributes which are not in CSS.
  • As a rendering toolkit spec, rather than a image; SVG includes some lighting models 63 phong 64 65 66
  • An academic wrote a list of 'primitives' rendering features of SVG animation 67. The maximum number of polygons is quoted at around 1000 ~ 3000 68, which is really low for actual rendering engines. The following are more notes on animation in SVG 69 70 71 72
    • With current browsers, SVG respects CORS limits same as other assets 73.

SVG editing in current HTML5

RSS. Share: Share this resource on your twitter account. Share this resource on your linked-in account. G+

SVG editing in current HTML5

RSS. Share: Share this resource on your linked-in account. Share this resource on your twitter account. G+ ­ Follow edited