SVG Tutorial
SVG Introduction
SVG Examples
SVG Simple Example
SVG in Web Browsers
SVG Coordinate System
 
SVG svg
SVG g
SVG rect
SVG circle
SVG ellipse
SVG line
SVG polyline
SVG polygon
SVG path
SVG marker
SVG text
SVG tspan
SVG tref
SVG textpath
SVG switch
SVG image
SVG a
SVG defs
SVG symbol
SVG use
 
SVG and CSS
SVG Stroke
SVG Fill
SVG Viewport and View Box
SVG Animation
SVG Scripting
SVG Transformation
SVG Gradients
SVG Fill Patterns
SVG Clip Path
SVG Mask
SVG Filters
 
 


SVG Tutorial

Connect with me:  
  Jenkov.com - News

SVG Introduction

SVG is short for Scalable Vector Graphics. It is a graphic format in which the shapes are specified in XML. The XML is then rendered by an SVG viewer. Today most web browser can display SVG just like they can display PNG, GIF, and JPG.

Internet Explorer 8 (and earlier) users may have to install the Adobe SVG Viewer to be able to view SVG in the browser. IE 9+, Chrome and Firefox all support SVG natively.

SVG is for 2-dimensional vector graphics. For a 3-dimensional format lookup X3D.

If you are not sure if SVG is right for you or your project, take a quick look at the SVG Examples page to get a quick overview at the capabilities of SVG.

SVG is for Vector Graphics

Being a vector graphics format SVG is mostly useful for vector type diagrams like:

  1. Two-dimensional graphs in an X,Y coordinate system.
  2. Column charts, pie charts etc.
  3. Scalable icons and logos for web, tablet and mobile apps and webapps.
  4. Architecture and design diagrams
  5. etc.

Being a "Vector Graphics" format the shapes to be displayed are stored as vectors or vector-like structures. In other words, as numbers. Not as pixels.

Being "Scalable" means that the viewer can scale the SVG image up and down in size without loss of quality. This is possible because the graphics are defined as numbers instead of pixels. Scaling the SVG image up or down just means multiplying or dividing the numbers defining the SVG shapes.

SVG is not ideal for bitmap graphics like photos, movies etc. although you can embed bitmap graphics in an SVG image. This can be a handy way to draw shapes or text ontop of a bitmap image.

SVG is Ideal for Generated Images / Graphs / Diagrams

Being an XML format (a textual format) SVG is rather easy to generate from within a Servlet, JSP, ASP.NET, PHP or other web application technology. This makes SVG ideal for computer-generated graphs and diagrams. Interestingly, you often need to generate exactly the type of diagrams for which SVG is ideal (graphs, charts, diagrams etc.) in web applications. This makes SVG an even better match for generating graphs and diagrams.

Scripting SVG

It is possible to modify SVG images generated in the browser via JavaScript. This makes it possible to use SVG for more dynamic presentations, and even small games (though it is probably better to use HTML5 Canvas for games).

About this Tutorial

The purpose of this tutorial is to get you up and running with SVG in a short time, and to be able to use the tutorial as a quick reference afterwards as well. While I will try to cover as much as possible of SVG, it is not the intention to cover each and every little bit of the SVG specification. Once you have a decent understanding of the basics you can easily consult the SVG specification on more advanced or special case topics.

This tutorial is "work in progress". If you want to be notified of new texts in this trail, you can subscribe to the RSS Feed.

ScriptDraw.com

If you want to play around with some of the examples in this tutorial, or just want to play around with SVG, I have created a simple, online SVG editor called ScriptDraw. You can find it here:

ScriptDraw.com

SVG Compressed - Kindle Book

I have published this tutorial as a cheap Kindle book ($0.99, 260+ pages) in case you prefer to read it on your Kindle. I have also edited all the articles to make sure they read like a book, in the right sequence etc.

Go to the SVG Compressed book page.

SVG Tutorial TOC

Below is a list of the texts currently available in this SVG tutorial. This list / menu is also available in the right side of each page in this tutorial.

NextNext : SVG Examples

SVG Tutorial
SVG Introduction
SVG Examples
SVG Simple Example
SVG in Web Browsers
SVG Coordinate System
 
SVG svg
SVG g
SVG rect
SVG circle
SVG ellipse
SVG line
SVG polyline
SVG polygon
SVG path
SVG marker
SVG text
SVG tspan
SVG tref
SVG textpath
SVG switch
SVG image
SVG a
SVG defs
SVG symbol
SVG use
 
SVG and CSS
SVG Stroke
SVG Fill
SVG Viewport and View Box
SVG Animation
SVG Scripting
SVG Transformation
SVG Gradients
SVG Fill Patterns
SVG Clip Path
SVG Mask
SVG Filters
 
 
Connect with me:
     
Newsletter - Get all my free tips!