SVG - Scalable Vector Graphic

Get Someone Else to Do IT! We Build Things!   Learn more... 

Why use SVG?

Svg allows to put graphics inside a web page, or a desktop document that can interacts with textual data. A SVG page may be built from a database, it may be searched by a search engine. You can turn XML numeric data into graphics by an XSL transformation.
A xvg page is scalable and interactive. You can display a city or a building and allow a user to visit it by selecting locations.
Svg is a standard defined by the World Web Consortium and may be freely used at production or end-user level without license to pay.

How to use SVG?

A SVG file is an XML document with graphical tags. It is viewed with a common browser with a plug-in, or a special viewer.
Svg may be used:
- as a standalone web page.
- embedded with the include tags: img src, object, applet, iframe.
  (I had tried the embed tag and this works on IE and Opera).
- linked with the link <a> tag.
- included by a CSS or XSL property or in XHTML.
Example:
<embed src="/webmasting.svg" type="image/svg+xml" width="200" height="100">

Main functions of SVG

  • transformations
  • colors, opacity, gradients, textures.
  • fill: painting the content of a shape or text.
  • stroke: painting the outline of a shape or text.
  • clipping
  • filter effects
  • template of objects
  • inserting symbols or images at coordinates.
  • interactive, event handling
  • dynamic
  • scripting
  • animation

File format

A SVG file must have the ".svg" extension under Unix, Windows.
A compressed, zipped SVG file must have the ".svgz" extension.
In the same manner you can save an image taken from a web page, you can save SVG either as .svg or .svgz.

A SVG file has no doctype but an informative svg tag instead:
 

   <svg version="1.1"
        baseprofile="full"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        xmlns:ev="http://www.w3.org/2001/xml-events">

How to program SVG documents?

To build a SVG document you need for a canvas. Batik provides a such Java canvas named "SVGCanvas2D" that convert your drawing into SVG.
If you want visually build a SVG document, you need for a component that can display SVG content and let the user interact with that content (insert object, rotate, put text, etc...) "JSVGCanvas" is a Java component to do that.
You need also to manipulate the SVG document from a scripting language with a DOM API. DOM (Document Object Model) is an object oriented representation of the document. Events may be assigned then to SVG elements.
All these modules are provided by Batik for Java programmers.

Components of SVG

Data types

SVG document is made of:

  • vector graphic shapes
  • images
  • texts
  • containers of other elements
  • styling properties.

Elements

- Canvas: a surface where to draw.
- Viewport: a rectangular region in a canvas.
- Use: a template.
- Property: a parameter for how to render the document.
- Graphical shapes: rect, circle, ellipse, line, polyline, polygon.
- Image.
- Text
- Symbol: reusable object as flowchart, electronic symbols.
- Container, made of other elements:
  • g: a container for grouping graphic elements, used as partial canvas.
  • svg: a document.
  • switch: a list of alternative elements with conditions for one selected.
  • clipPath: masked elements.
  • mask: use objects as mask.
  • pattern: a texture.
  • a: a link.

SVG and XML

XML may be translated into SVG with an XSL definition. This allows documents produced by application, statistics for example, to be turned directly into graphical view/
It is compatible with HTML 4.0 and XHTML 1.0
The following XML extensions may be used on SVG documents:
  • XLink: for referencing.
  • XPointer: syntax for referencing element
  • Stylesheet: styled either by CSS 2 or XSL.
  • DOM: included in SVG and compatible with DOM 2 plus event handling.
  • Incorporates and extends SMIL, the animation language.

Converting SVG to GIF, PNG, JPG or other raster image

Using Batik
This is easy, just export the image in the raster format. The result is not perfect.

Make a screen shoot
1) set the screen to a resolution high enough to display the whole image.
2) use a capture tool such as IrfanView or XnView or a specialized tool as MWSnap, and start capturing in background task for the current window and client.
3) display the SVG file with a browser (the Adobe plug-in must be installed) and press the capture key or click on the array to capture, depending on the tool used.
4) save the capture, as a PNG file or Jpeg.

Simple demo: Tetris

View the source, in JavaScript and SVG. Requires Firefox 1.5

Tired of sifting through articles, and just want the job done! We build things... Websites, E-commerce, Back end Enterprise Level Applications, From a simple Website to Full Blown Dynamic Applications using Administrative Tools to manage the data, if you need it we can build it. Located in DFW area in Texas area and serving the surrounding Dallas, Fort Worth  metro plex areas as well.  Learn more...