All about SVG and all browsers; a trick to copy/paste svg in all browsers; SVG-edit is a Javascript-driven SVG editor that works in any browser; google docs drawing;inkscape; aviary Raven and extensions (screen capture)

"Preface"
Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for describing 2D vector graphics, both static and dynamic (interactive and/or animated).
Since they are XML files, SVG images can be created and edited with any text editor, but drawing programs are also available that support SVG file formats.

SVG≠Canvas. Canvas is a bitmap based format: the Canvas element provides an approach to rendering dynamic graphics in HTML that's procedural rather than declarative. Instead of specifying the shapes to draw in XML, the author executes drawing commands from a script. Canvas does not allow for static rendering, and drawn elements are not identifiable in a DOM-like way.

Interactive SVG: time-based modifications to the elements can be described in SMIL (Synchronized Multimedia Integration Language, is a W3C recommended XML markup language for describing multimedia presentations; SMIL is not yet native to web browsers, so in order to put SMIL in a web page, one must embed it and open it in a plug-in such as Quicktime or Windows Media Player), or can be programmed in a scripting language (JavaScript; see the example in this blog (bottom)). The W3C explicitly recommends SMIL as the standard for animation in SVG.
A rich set of event handlers can be assigned to any SVG graphical object.

----Rendering and copy/save a SVG in your browser (tag svg)

I tested two SVG in blogger (this ex-ample.blogspot):

• static SVG: http://ex-ample.blogspot.com/2011/07/svg-test.html
• interactive SVG: see the bottom of this blog.

List of results (last version of browsers; data@july 2011):

• chrome 14.0.814.0 dev: 
• rendering: OK
• right click: nothing.
• 
  
• Firefox 6.0b
• rendering: OK
• right click: nothing.
• 
  
• safari 5.0.5
• rendering: NO
• right click: nothing.
• Internet Explorer (IE) 8.0.600.18702 (with the Chrome Frame plugin for IE (http://code.google.com/chrome/chromeframe/))
• rendering: NO
• right click: nothing.
• Internet Explorer (IE) 9.0.8112.16421 (Native support became partially available in IE9 )
• rendering of the examples of this blog (embed SVG): NO
• right click: nothing.

More: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(SVG)

Conclusion there are no native copy/save then we need plugin, extension, addon or... tricks.

Chrome: 

just a trick:

1. Right-click (mac: ctrl click) on the post  below "SVG test in blogger" (not on this text).
2. Select "inspect element" (the last item)
3. Chrome opens a new window "developper tools".
   It's a complex window but just copy (ctrl c) and close this window.
   Now your clipboard contains the code (between the svg tags).
4. paste in a text editor and save with "name.svg". 
5. You can copy in a post, etc...

 This solution gets the generated code (with the svg of the bottom of this blog, you must get the original source code, not the generated code).

-----just  some comments about 2 chrome extensions:

Save Canvas and SVG Element from right-click menu:

https://chrome.google.com/webstore/detail/mohncbcgngjkgmeapopaiibjpmgopgna?hl=en#

problem: doesn't work...

The extension "Docs PDF/PowerPoint Viewer (by Google)" opens a new browser window when the URL is a svg URL. It's a bad solution (many errors).

Firefox :

The same trick:
1) right click (mac: ctrl click) on a part of the drawing.

2) A context menu appears (sorry , in french but the item position is the same): 

3) Select "source code" (3nd item)

4) Firefox creates and opens a new window (source DOM of the selection: it contains the code between the svg tags):

5) Don't use "save" (many bugs), just copy the code and paste/save in a text editor and use "name.svg".

This solution only gets the generated code (with the svg @bottom of this blog, you must get the original source code, not the generated code).

Internet explorer:

I think that the same trick could be used (i will test...).

Ssrc SVG Plugin from Savarese Software Research Corporation is a plug-in for rendering SVG (rendering SVG and XUL ) in Internet Explorer versions 6, 7, and 8 (and source):

http://www.savarese.com/software/svgplugin/

------------Create/change/save SVG
ex-ample: http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html
alpha: http://svg-edit.googlecode.com/svn-history/r1771/trunk/editor/svg-editor.html

http://code.google.com/p/svg-edit/

SVG-edit is a fast, web-based, Javascript-driven SVG editor that works in any modern browser:

• Firefox 1.5+
• Opera 9.50+
• Safari 4+
• Chrome 1+
• IE 6+ (with the Chrome Frame plugin, native IE9 support in 2.6)

This editor depends on many other open-source projects. See Acknowledgements for details.

In browsers that support the W3C File API, this editor allows you to open local files. The set of browsers in which this supported is: Firefox 3.6+, Chrome 6+, Safari 5+, and Opera 11.10+ (builds from 2011-04-05 onwards).
-------
http://diagram.ly/
An online free javascript based tool that allows you to save the diagrams you create online as svg files.
-------
Google Docs (drawing) can create and export a drawing into SVG files:

------
OpenOffice.org Draw can export SVG drawings. Import extensions are available to import SVG images into OpenOffice.org Draw.

-------------------
http://inkscape.org/
desktop SVG (freeware, open)
download:
http://sourceforge.net/projects/inkscape/files/
http://inkscape.org/download/?lang=en

• Mac OS X
• OS X 10.6, Snow Leopard – Universal .dmg (requires Apple's X11/Xquartz 2.3.4 or higher)
• OS X 10.5, Leopard – Universal .dmg   (requires Apple's X11 2.1.6 or Xquartz)
• Windows – installer, portable, 7zip. 

-------------------
http://www.aviary.com/online/vector-editor#

http://www.aviary.com/
Aviary (application suite)
Aviary is a proprietary web-based multi-media application suite that is free to use. They are using the Adobe Flex platform for most of their tools.

• Phoenix - Advanced Image Editor. An web-based image editor that can be utilized by anyone looking to retouch and manipulate a photo. From basic image editing to manipulating complex effects, Phoenix delivers essential key features available in powerful desktop clients right through your browser.
• Peacock - Node based visual laboratory Peacock is a tool with depth and endless possibilities like dragging, dropping, and connecting generators, effects, resources, and controllers. Users can create stunning art by combining terrains, patterns, computational effects, and more.
• Toucan - Color swatches and palettes creator
• Rookery - Codename for the file system utilized by Aviary.
• Raven - Vector editor. Raven allows users to create fully scalable vector art appropriate for logos,.
• Talon - Chrome & Firefox Screen Capture Add-On. It will perform a screen capture of the visible portion of any webpage and then open the capture instantly in a basic image editor where you can do markup (draw arrows and rectangles), edit (crop, rotate and resize) and get the exact pixel colors of the image.
  https://addons.mozilla.org/en-us/firefox/addon/aviary-screen-capture-quick-la/
  https://chrome.google.com/webstore/detail/ncgcgghbabbopfcpgcjpfffdgnbadegf
  Chrome web Apps: https://www.google.com/enterprise/marketplace/viewListing?productListingId=3442+15105250666671696895
  https://chrome.google.com/webstore/search?q=aviary
• Falcon - Image Markup. Falcon can be used for resizing, cropping, rotating, and other simple editing. Falcon runs lightning fast even on the slowest connections, which makes for great results and sharing in no time!
• Myna - Audio editor. Myna is a powerful audio editing tool used to remix your favorite songs or record your own.
• Roc - Beat generator. With over 50 free instruments, users can create simple beats or an masterpiece with a simple point and click interface

-----------------

Adobe Illustrator ($$$): http://www.adobe.com/products/illustrator.html

Illustrator CS5 HTML5 Pack (free add-on): http://labs.adobe.com/technologies/illustrator_html5/

http://www.adobe.com/aboutadobe/pressroom/pressreleases/201009/091310AdobeDeliversHTML5PackIllustrator.html