[dba-Tech] SVG Scalable Vector Graphics

[Jim Lawrence]

Hi All:

I have been spending some of my evenings trying to get up to speed in the internet's new graphic form, SVG. It has actually been around for a while but it has taken browsers a long time to fully embrace the concepts. 

The beauty of using this form of graphics is that it is fully open, can shrink or grow a graphic to virtually unlimited sizes, with no loss of quality...displays equally as well on a 50 inch screen as it can on a cell phone. It also can be made, relatively easily to be fully animated. Because the graphics are just mathematically generated, it only takes a very small amount of data to create beautiful illustrations and it requires no server side modules...this is perfect for the web!

Note: IE was the last browser to adopt SVG but even older versions can be made productive by adding a link to the Chrome Webkit, on the webpages. This may seem similar to the Flash products but other than basic functionality, that is where the similarity ends...SVG is built right into your browser, is not bulky, requires no downloads. is not proprietary or dangerously buggy.

With some initial help, I have been gathering information and a set of tools to work with Scalable Vector Graphics and below is a list of links:

A explanation of what is SVG from the W3 web standards organization on the use of the Path operand:
http://www.w3.org/TR/SVG/paths.html#Introduction

Below are a couple of editors that can run on all platforms:
For those who do not have Adobe Illustrator here is a product that I think is equal as good if not better...
https://inkscape.org/en

...and a SVG graphic editor that is totally built in JavaScript and can therefore run on any browser...
https://code.google.com/p/svg-edit

...if your current font library is not SVG; many are still TTF, here is a browser based converter...
https://everythingfonts.com/ttf-to-svg 

If you don't have the font style you want, there might be a perfect vector font from Google's font libraries to add to your web pages...
http://www.google.com/fonts

...for a series of JS code samples, many with animation, that you can use to build your own website checkout D3...
http://d3js.org and https://github.com/mbostock/d3/wiki/Gallery

In summary, SVG is the new web (desktop) graphic standard and though it might be initially difficult to master, after using such products as Adobe Photoshop for years, it will be well worth it. Hope this helps someone. :-)

Jim