SVG Source Examples

Website Archive:-This page is no longer updated. Access the latest code and info at the New Page.

   This is a new, additional resource for SVG. The specification is an open standard that has been under development by the World Wide Web Consortium (W3C) since 1999.
   The uptake of SVG has been slow, but what about the promise SVG originally had when it was assumed all browsers would support it? There's no doubt that incomplete, cross browser support is less of an issue with more people and products supporting it every day.
   This area of the website aims to add to this belated enthusiasm and increase the usage of SVG.

SVG to HTML tool Bug fixes and fledgeling help system. See "Main changes and plans" below for more detail. Please report bugs here.
Developers Note: Text is not supported in the converter. Pre-process the SVG that lost the text when converting. This is how to do it.
What just got Converted using SVG to HTML? I thought it would be interesting to show the last thing that was created by converting an SVG! Sometimes the success is 100% or something close to that. However, if an SVG contains unsupported features then the result will be incomplete. Some will be good, but others not so much! MOST RECENT CONVERTED SVG ON THE SERVER RESULT Successful 0.5+ SVGTOHTML Conversion Examples........ Main changes and plans.... In 0.602. Autocode. Especially for Map people but everyone who wants to easily code up a diagram with their uploaded SVG. Zoom. Science and medical applications to name but 2 professional vertical skill sets?. Zoom into detail. In 0.601. Bug fixes. Start of dynamic help system to enable the delivery of quality files with no dilution or loss of material from the SVG file. In 0.600. Performance improvement. Progress meter included. Interface Message for mobile hit. Conversion Report. Road Map. (A)(6.01)Bug fixes for files that fail and start of help system. (A){6.02)Interactive code added options: 'Autocode' and 'Zoom'. (A){6.03)Additions to dynamic help system and Base 64 images from SVG. (A)(6.04)Analyse and implement SVG Classes (SVG Specification 1.1). (B)Improved Linear Gradients(With 0.61). (C)Improved Radial Gradients(With 0.62). (D)Text support(With 0.7). Recent changes Additional converting support(0.57) Option 1 : 'Progam Image' images can be made interactive. The output (View Source) is designed that way so the user can see the page forming. (Avoids white screen of death). See the instruction that are on the converter. Option 2 : 'Script Image' images that make SVG cross-browser compatible. Makes html files that load at comparable speed to SVG. Open this world map it was made as a 'Progam Image'. Open this world map it was made as a 'Script Image'. Files that failed showed me the bugs. Quite a few failed files now get converted ok with 0.5+.
Important links Get the Kit!!!. If you don't have an SVG editor already then you should download Inkscape to get started. There is also Shakthi's online SVG editor. You can open this tool here to start creating and saving SVG. Open your editor or get existing SVG from the clipart library here and then use the conversion utilities on this page.

How to use the SVG to HTML tool

(1)Open SVG to HTML tool in either the Chrome, Firefox, Safari or Opera browser.
(2)Click on the little blue "SVG" button.
(3)Select the SVG file from the dialog asking for a file.
(4)Hit the blue "Convert" button.
(5)A little server clock appears for larger more complex files.
(6)Click the "Collect" button.
(7)Please report bugs and we can fix them quickly.

How to use the SVG to SVG Script tool

(1)Paste your entire SVG code to the left text area of the tool.
(2)Transfer code to the right text area by using the larger arrows.
(3)View the codes output using the small arrows.
(4)The code can be transferred to your web page as required.
(5)Please report bugs and we can fix them quickly.

SVG to SVG Script tool

Josep's Raphael code from SVG .
Above tool not compatible with IE.
Not all SVG can be converted with the current version, The usual problem is that it cannot handle radial gradients. You can remove these from within the 'defs' tag to get a partial migration.Please note this tool has been updated a number of times recently and supports far more SVG to Raphael migrations.
Version 0.16

Diary Archives.

Archive.