• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Hour 1. Getting Started with SVG > Advantages of Using SVG

Advantages of Using SVG

SVG offers designers and developers alike an amazing level of control for both the appearance and function of their graphics.

  • Easy editing

    SVG files are easily editable, allowing quick access and precise control over the presentation of imagery. Unlike SWF binaries (the file format for Macromedia's Flash), SVG exists as raw, editable code. This basic nature of SVG has two distinct advantages:

    1. SVG is compatible with other technologies.

      SVG works together with SMIL (Synchronized Multimedia Integration Language), CSS, JavaScript, and other technologies. This ability allows SVG to leverage these technologies to its own advantage, using the best features of other suites to enhance its own product. For instance, rather than forcing developers to learn a whole new method of defining object style, SVG can utilize CSS. This not only extends SVG's capabilities, but also reduces the learning curve developers face when exploring this new technology.

    2. Editable code decreases the impact a software package's limitations may have on development.

      Anyone who has used a WYSIWYG HTML editor is well aware of the limitations a particular software implementation may impose on development. By retaining an editable, easy-to-read format, SVG can be finessed by a developer regardless of the origination of the file—whether from a software export or from a fellow developer.

  • Searchable content

    Because the graphics are code-based, SVG content is fully searchable. As opposed to other graphic formats where your textual content is embedded in a binary file, or converted into a graphical representation of text, SVG content is housed within the code (just like HTML), allowing a deep search through your graphic's contents. For instance, you could search for “18th Street,” and be taken to that specific location on an SVG map.

  • Localization

    Because content is defined by text, imagery and text can be converted to different languages more efficiently than with other technologies. For instance, one graphic file can serve as a visual template for English, German, and French versions of the same graphic!

  • Global styling

    Graphical style can be applied and changed globally, allowing an entire suite of graphics, or even a Web site, to be visually altered simply by changing one file.

  • Open standard

    Additional support and functionality can be easily added by harnessing XML's DTD (document type definition) and namespace technology. For instance, with certain SVG viewers you can add audio and graphing features by incorporating other technologies via an SML namespace reference. (It is important to note that either the viewer or accompanying plug-ins must be able to handle the additional features, as the SVG viewers will likely handle only SVG rendering.)

  • Bitmap effects on vectors

    You can apply real-time Photoshop-like effects to your SVG artwork using filter effects. SVG has a series of highly customizable filters that can be applied to both vector and raster content on the display side. This allows you to have preset filters applied to dynamic content as it is passed to the SVG file. Thus, you can apply a drop shadow effect on dynamic text without having to convert that text into a raster image (such as a GIF).

  • Data handling

    SVG and other open standard formats can be used to create dynamic graphics. This can be an advantage when other options, such as Flash Generator, are financially out of reach. Being an XML subset, SVG also offers the advantage of being truly designed for data handling.

  • Rich typographic control

    SVG allows you to use your actual fonts. Without requiring additional plug-ins to utilize typefaces not on the viewer's computer, SVG allows designers to use high-quality, professional fonts. With a variety of methods for encoding the typeface, developers can choose whether to embed the entire typeface (to allow for dynamic content's possibilities) or just specific character outlines (to reduce file size).


    SVG allows for true “What You See Is What You Get” display. Designers can ascertain their document's display by embedding original typefaces and setting precise pixel values for their content. Even better, SVG allows designers to set certain attributes, such as machine fonts, as variable to allow for faster file downloads.

  • Debugger

    Unlike HTML and other formats, SVG has a “zero tolerance” policy for code conformance: if your SVG code is incorrect, it will display only up to the point of error. To help developers sort through their large files, many SVG viewers (such as the Adobe SVG Viewer) will pinpoint the line and column number of an erring SVG statement within the code.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint