What is an SVG Document?

SVG is a vector-based graphics in a text format

Scalable Vector Graphics (SVG) is an XML language for creating two-dimensional vector and mixed vector/raster graphics. SVG document is a text file that describes images as geometric primitives: lines, curves, shapes, text, etc. Vector objects are constructed and stored as a set of commands, numbers, formulas, not in a pixel grid as in bitmaps.

Vector file format is widely used in the web, and understanding the basics of SVG will be helpful for developers.

Elements and Attributes

Each SVG document is based on XML main structural elements: a tree-like structure, tags, elements, and attributes. The elements are applied for images drawing, transforming, styling, and placing. They can contain attributes that define its properties, i.e. details about how the element should be handled or rendered. The element writes with the help a start-tag and an end-tag in angle brackets. The SVG file should be written according to XML syntax and W3C SVG 2.0 specification.

Pros and Cons of the SVG format

SVG format has all the vector graphics advantages, as well as many other pros over bitmap image formats.

Pros

  1. Scaling. Unlike bitmap graphics, vector SVG images are resizable and zoomable in a browser without losing any quality. SVG gives you an ability of indefinitely scaling.

  2. Small file size. Compared to bitmaps SVG files have a considerably smaller size; it allows faster loading the web-page with SVG.

  3. Programmability. SVG images can be created, constructed and edited with any convenient text editor.

  4. File compression. The SVG files are text XML, so they compress well without data loss. SVGZ is the compressed SVG file. It is typically 50 to 80 percent smaller in size than SVG.

  5. Accessibility. Being text-based file in the web-page SVG image becomes accessible for screen readers and search engines, that can read its code. The SVG images can be searched, indexed, and scripted.

  6. Performance. SVG can be embedded into an HTML document; this results in better load performance for the website.

  7. Animation and interactions. SVG is accessible from JavaScript and allows developers to create animations and interactive images.

  8. Styling. For any element of the SVG image, CSS properties can be set.

  9. Flexibility. SVG images can interact with DOM, CSS, HTML and Javascript.

  10. SVG is a free open standard. SVG 2.0 is a W3C Recommendation and is the most recent version of the full specification.

  11. The SVG background is transparent by default, that is very important and convenient for web-designer actions.

Cons

  1. File size depends on the details number. The detailing and complexity of the SVG image are proportional to geometric primitives’ number, and hence to the “weight” of the file. Conclusion: poor performance for working with a large number of elements.

  2. Nonrealistic images. SVG is not well suited for drawing photorealistic images. Vector pictures do not allow for natural color transitions yet. But, today, that is not their purpose.

  3. Old browsers and insufficient cross-browser compatibility. SVG is officially supported by all main web browsers, except in Internet Explorer 8 and earlier. But some servers cannot render all types of SVG elements, so the generated bitmaps are sometimes not as the author wanted.

  4. Non-3D graphics. SVG completely lacks support for describing 3D objects.

Despite these disadvantages, developers of modern browsers as well as Aspose.SVG team approve that SVG is the future of web design graphics.

Where to use?

Being a vector graphics format that corresponds to resent web development requirements such as scalability, performance, programmability, etc., SVG finds the main application on the web. Zooming, without losing quality, also opens the perspective for SVG using in polygraphy.

Some practical use cases:

  • scalable icons and logos
  • simple illustrations, tables, diagrams, graphs, infographics, maps
  • animations
  • special effects
  • building interfaces and applications
  • simple games
  • polygraphy.

The goal of Aspose.SVG team is to help you find out enough about SVG technology, that allows you to produce what you need.