Home » Develop » About SVG

About SVG

Because the SVG vector file format is Inkscape's central format, understanding the basics of SVG will be helpful when contributing to Inkscape's development. For example, to make your own extensions, you will need some experience in climbing up and down the XML tree - and if you want to work on some of the core Inkscape functions, you might even have to dive deep into the maths of matrices and Bézier curves.

We collected some information here which we hope will get you started easily.

What is SVG?

SVG (acronym for "Scalable Vector Graphics") is a free and open, standardized file format for vector graphics. It is maintained and developed by the W3C (World Wide Web Consortium), the main international standards organization for the web.

It is based on XML (Extensible Markup Language), also a W3C standard format, which is a generic markup language developed to represent arbitrary data in human- and machine-readable format. If you ever used (X)HTML to create a website, you already know the main structural elements: a tree-like structure, tags, elements and attributes.

The SVG file format uses these structures to represent visual data. The tags, elements and attributes which can be used and understood by vector graphics editing and viewing programs are determined in the SVG specification. The currently (March 2015) valid specification is SVG 1.1, with SVG 2.0 on the way, and many of the new features are already implemented in Inkscape and many viewers (like web browsers).

The features of SVG 1.1 include paths, basic shapes (like circles and polygons), text, fill, stroke and markers, color, gradients and patterns, clipping, masking and compositing, filter effects, interactivity, linking, scripting, animation, fonts and metadata. The W3C also makes a point of backwards compatibility and extensibility of the format.

As an example to demonstrate the basic principle, take a look at this:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
  <rect x="50" y="50" width="200" height="100" style="fill:red"/>
</svg>

When rendered, it will look like this (open the page in your browser's HTML source mode to see how it is comfortably embedded right into the HTML):

As a more complex example, here's an excerpt of the Inkscape logo in SVG, which shows some of the other features. Note how other, non-graphical data, like the author or the licence of the file can easily be included without altering how the picture looks:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   id="svg2"
   height="128"
   width="128"
   version="1.0">
  <title
     id="title7387">Inkscape Logo</title>
  <defs
     id="defs4">
    <clipPath
       id="clipoutline1"
       clipPathUnits="userSpaceOnUse">
      <path
         d="M 54.1,12.5 L 12.9,54.7 C -2.7,70.3 23,69 32.3,74.9 C 36.6,77.7 18.5,81.3 22.2,85 C 25.8,88.7 43.9,92.1 
            47.5,95.7 C 51.1,99.4 40.2,103.3 43.8,107 C 47.3,110.7 55.7, 107.2 57.2,115.6 C 58.3,121.8 72.6,118.7 
            79,113.4 C 83,110 72.1,110 75.7,106.3 C 84.7,97.2 92.7,102.2 96,93.8 C 97.8,89.3 82.4,86.1 86.5,83.2 C 
            96.3,76.3 132.3,72.8 115.7,56.2 L 73,12.5 C 67.7,7.5 59,7.5 54.1,12.5 z M 44.2,77.2 C 45.1,77.2 75,81.2 
            63.5,84.3 C 59.1,85.5 38.9,77.2 44.2,77.2 z M 101.4,93.8 C 101.4,95.9 117.7,97.1 116.8,93.3 C 115.5,86.9 
            103.2,87.4 101.4,93.8 z M 31.9,104.9 C 35.6,108.1 41.2,104.2 43,99.7 C 39.4,95 26.1,100 31.9,104.9 z M 
            99.4,98.2 C 94.8,102.4 100.2,106.8 104.7,103.9 C 105.9,103.1 104.6,99.2 99.4,98.2 z "
         id="outline1" />
    </clipPath>
    <filter
       id="filter6017"
       color-interpolation-filters="sRGB">
      <feGaussianBlur
         id="feGaussianBlur6019"
         stdDeviation="0.80546496" />
    </filter>
    <linearGradient
       y2="40"
       x2="60"
       y1="20"
       x1="82.11859"
       gradientUnits="userSpaceOnUse"
       id="linearGradient9175"
       xlink:href="#linearGradient5785" />
  </defs>
  ...
  <metadata
     id="metadata49">
    <rdf:RDF>
      <cc:Work
         rdf:about="etiquette-icon">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:creator>
          <cc:Agent>
            <dc:title>Andy Fitzsimon</dc:title>
          </cc:Agent>
        </dc:creator>
        <dc:rights>
          <cc:Agent>
            <dc:title>Andrew Michael Fitzsimon</dc:title>
          </cc:Agent>
        </dc:rights>        
        ...
    </rdf:RDF>
  </metadata> 
  ...
  <g
     id="g9139"
     transform="matrix(0.9965784,0,0,0.9962666,0.2205497,-1.598221)"
     style="display:inline;enable-background:new">
    <g
       id="g6035"
       transform="translate(3.68968e-7,0.4883067)"
       style="opacity:0.7832512">
      <path
         id="path5987"
         d="m 54.1,12.98831 -41.2,42.2 c -15.6,15.6 10.1,14.3 19.4,20.2 4.3,2.8 -13.8,6.4 -10.1,10.1 3.6,3.7 21.7,7.1 
            25.3,10.7 3.6,3.69999 -7.3,7.59999 -3.7,11.29999 3.5,3.7 11.9, 0.2 13.4,8.6 1.1,6.2 15.4,3.1 21.8,-2.2 4,
            -3.4 -6.9,-3.4 -3.3,-7.1 9,-9.09999 17, -4.1 20.3,-12.49999 1.8,-4.5 -13.6,-7.7 -9.5,-10.6 9.8,-6.9 
            45.8,-10.4 29.2,-27 l -42.7,-43.7 c -5.3,-5.000003 -14,-5.000003 -18.9,0 z m 47.3,81.3 c 0,2.1 16.3,3.3 
            15.4,-0.5 -1.3,-6.4 -13.6,-5.9 -15.4,0.5 z M 31.9,105.3883 c 3.7,3.2 9.3,-0.7 11.1, -5.2 -3.6,-4.69999 
            -16.9,0.3 -11.1,5.2 z m 67.5,-6.69999 c -4.6,4.19999 0.8,8.59999 5.3,5.69999 1.2,-0.8 -0.1,-4.7 -5.3,
            -5.69999 z"
         style="fill:#000000;fill-opacity:1;filter:url(#filter6017)" />
      <path
         style="opacity:0.5763547;fill:#000000;fill-opacity:1;filter:url(#filter6031)"
         d="m 54.1,13.96492 -41.2,42.2 c -15.6,15.6 10.1,14.3 19.4,20.2 4.3,2.8 -13.8,6.4 -10.1,
         ...         
         id="path6021" />
    </g>
  ...
  </g>
</svg>

When rendered, the logo will look like this:

Why does Inkscape use SVG?

SVG is a human-readable format that can be edited using just a text editor, it can be searched and compressed, it can be automatically created and manipulated, mixed into (X)HTML it can be an integral part of a web page, it can be animated, it can be used to create desktop environments, and of course, fantastic artworks.

Also, SVG allows for easy embedding of editor metadata. The Inkscape program is a heavy user of this feature, using it to store the raw data that goes into things like star shaped paths, and to save its own settings for the specific file right inside it.

But foremost, and in addition to being user- and developer-friendly and versatile, it is an open standard, which can be used as-is in many different applications. Standard-conformity was one of the reasons for the formation of the Inkscape project (see FAQ).

The Inkscape project does not only use SVG as its native file format, it also takes part in the further development and refinement of SVG features by delegating a representative to the W3C SVG Working Group.

How does Inkscape implement SVG?

Inkscape prides itself on being a fully standard-compliant SVG editor. As of March 2015, it even supports rendering of SVG properties which are not yet officially part of the standard, but have reached a stable state in the SVG Working Group's draft for SVG 2.0. Those include hatched patterns, the fill/stroke painting order and CSS blending modes. Currently, those are not yet editable via the GUI, but can be changed by editing the attributes in the XML editor, of course.

Mesh gradients are also already implemented in the development version of Inkscape, but not available in 0.91 yet. The standardization process for this feature stabilized only recently and there is still a lot of work to be done on the user interface to make editing mesh gradients comfortable.

Work has already started on the implementation of CSS-based text in a shape.

Although all these functionalities make Inkscape nearly a complete reflection of the current and drafted SVG standard, there are also a few features which are 'missing' for various reasons. Inkscape does not implement the tiling filter, there is no animation, nor is there current work ongoing to make Inkscape an editor for SVG animations, which would require a very large amount of work on the GUI and the underlying animation functions. SVG fonts, which are part of the SVG 1.1 specification, have been dropped from the draft for SVG 2.0. They will be replaced by SVG inside OpenType fonts.

The only thing in Inkscape which currently is not standard-compliant is flowed text. This is because the standardization process for SVG 1.2, where flowed text was supposed to be included, was interrupted. But by then, the feature was already in the software, and it was useful for many users. As a result, the Inkscape developers did not just take it away again, but rather kept it in, so people can dynamically edit their texts from within Inkscape.

Learn SVG

Technical Info

General Info

  • SVG Basics, by David Dailey
  • SVG Topics from Peter Collingridge's blog
  • Learn SVG - Comprehensive advanced text book about SVG by Jon Frost, Stefan Goessner and Michel Hirtzler, freely available for online reading. Because of its age, not all presented techniques may be valid any more, but the explanations of basic principles and SVG properties are still very helpful.
  • Tavmjong Bah's Blog, which gives a lot of background information on SVG specification development (among other SVG- and Inkscape-related contents)

Tutorials

This is just a small selection of all the tutorials that are available on the internet:

More tutorials can be found using your favorite search engine.

Inkscape is Free and Open Source Software licensed under the GPL.