WebBuilding

Languages and formats

SVG

Summary

SVG (Scalable Vector Graphics) is an XML-based text format for two-dimensional drawings that stay sharp at any size. The W3C built it from competing 1998 proposals, and SVG 1.0 became a W3C Recommendation on September 4, 2001. Browsers began drawing SVG natively in 2005, Internet Explorer followed with version 9 in 2011, and as of October 22, 2026, W3Techs finds SVG images on 68.3% of websites.

Web Building Encyclopedia · Languages and formats · Last reviewed October 22, 2026 · 8 min read

What SVG is

SVG, short for Scalable Vector Graphics, is a text format for drawings on the web. MDN describes it as an XML-based markup language for two-dimensional vector graphics, and as being, in effect, “to graphics what HTML is to text.”1

Vector means the file stores instructions, such as “draw a circle here, this wide, filled with this color,” instead of a fixed grid of colored dots (pixels). A browser follows the instructions at whatever size the image is shown, so an SVG logo stays sharp on a phone, a laptop or a large monitor.1 The first standard defined SVG as a language for “two-dimensional vector and mixed vector/raster graphics in XML,” so an SVG file can also hold ordinary photos alongside its shapes.2

Because SVG is plain text, it can be written in any text editor, searched, compressed and changed by scripts. It is designed to work with the other parts of the web platform: CSS for styling, JavaScript and the DOM (the browser’s model of a page) for scripting, and SMIL for animation.1 The current draft standard, SVG 2, says SVG can be used on its own, mixed with HTML or embedded in other XML languages.3

As of October 22, 2026, W3Techs finds SVG images on 68.3% of websites. That puts it third among image formats, behind PNG at 74.9% and JPEG at 68.8%, and ahead of WebP at 22.9%. A site can use more than one format.4

SVG files have the media type image/svg+xml and the extension .svg. A file compressed with gzip, a common compression tool, may use the extension .svgz instead.56

Origins: six proposals in 1998

The work began at the World Wide Web Consortium (W3C), the body that writes many web standards. In 1996 Chris Lilley of the W3C wrote a document setting out general requirements for vector graphics on the web.7

In 1998 the W3C received six competing proposals for web vector graphics from different groups of companies.7 The two best known were:

  • PGML, the Precision Graphics Markup Language, dated April 10, 1998. Its authors came from Adobe, IBM, Netscape and Sun Microsystems, and it was based on the imaging model shared by PostScript and PDF, Adobe’s printing and document formats.8
  • VML, the Vector Markup Language, published as a W3C Note dated May 13, 1998. It was submitted by Autodesk, Hewlett-Packard, Macromedia, Microsoft and Visio.9 Microsoft said VML documented a product it had already built and shipped.7

The other four were Web Schematics, HGML, WebCGM and DrawML.7 The W3C then chartered an SVG Working Group. According to the group’s own history page, it chose not to develop any single submission and built a new language informed by all of them. That page names Chris Lilley and Jon Ferraiolo of Adobe as the strongest early influences.7

The first public draft of SVG appeared on February 11, 1999, edited by Ferraiolo. It called itself “the first draft version of the SVG specification to be posted for public review” and listed 23 authors from companies including Microsoft, Adobe, Apple, IBM, Netscape and Sun.10

SVG 1.0, SVG 1.1 and the mobile profiles

SVG 1.0 became a W3C Recommendation, the W3C’s term for a finished standard, on September 4, 2001.2 Its author list names 37 people who took part in the working group, among them Håkon Lie of Opera, and representatives of Netscape, Microsoft, Apple and Macromedia.2

In its announcement the next day, the W3C quoted its director, Tim Berners-Lee: “Scalable Vector Graphics are the key to providing rich, reusable visual content for the Web.”11 The same release listed tools that already read or wrote SVG, including the Adobe SVG Viewer, which shipped with Adobe Acrobat Reader 5.0, Adobe Illustrator 9.0, CorelDRAW and Batik, an open-source SVG toolkit from Apache.11

SVG 1.1 followed as a Recommendation on January 14, 2003.12 It described SVG as “a modularized language,” meaning its features were split into modules that smaller devices could pick from.13 On the same day the W3C published Mobile SVG Profiles, which defined SVG Tiny for cellphones and SVG Basic for PDAs (handheld organizers).14

SVG Tiny 1.2 became a Recommendation on December 22, 2008. By then the profile was meant for devices from cellphones and PDAs to laptops and desktop computers, and the specification says the name “Tiny” is historical.15 A corrected SVG 1.1 Second Edition became a Recommendation on August 16, 2011.12 As of October 22, 2026, it is still the newest SVG Recommendation, because SVG 2 has not yet moved past the Candidate Recommendation stage.1216

Browsers catch up

The tools the W3C listed in 2001 were mostly separate programs, such as the Adobe SVG Viewer that came with Acrobat Reader.11 Support built into the web browser itself came later, in stages:

  • Firefox. Firefox 1.5, released on November 29, 2005, added scriptable 2D graphics through SVG 1.1 and let SVG be used inside XHTML pages (the XML form of HTML).1718 Can I use, a site that tracks browser features, counts Firefox 2 as partial and Firefox 3 as the first version with full basic support.19
  • WebKit. On December 15, 2005, Apple engineer Eric Seidel told WebKit developers that SVG support was stable enough to be turned on by default in WebKit, the engine behind Safari.20 Can I use lists full basic support from Safari 3.2 and from Chrome 4.19
  • Internet Explorer. Microsoft had backed VML, and Internet Explorer had no SVG support before version 9.19 On January 5, 2010, Microsoft’s Patrick Dengler wrote that the company had asked the day before to join the SVG Working Group.21 On March 18, 2010, Microsoft program manager Jennifer Yu described the initial support for SVG 1.1 Second Edition in the Internet Explorer 9 Platform Preview, an early test build.22 Internet Explorer 9 was released on March 14, 2011.23 Can I use rates Internet Explorer 9 to 11 as partial.19

A change in HTML itself mattered just as much. The HTML5 parser, the part of a browser that reads HTML, learned to accept an svg element written straight into an ordinary HTML page. Firefox 4, shipped on March 22, 2011, used the new parser to let pages embed SVG directly in their markup, and it also allowed SVG in the img element and as a CSS background image.24 Today the HTML Living Standard, maintained by the WHATWG, treats svg as embedded content and leaves its meaning to SVG 2.25

As of October 2026, Can I use estimates that browsers with full basic SVG support account for 97.28% of global use, with another 0.21% partial.19

How SVG works

An SVG image is a tree of elements, like an HTML page. The outer svg element usually carries a viewBox attribute: four numbers giving the left edge, top edge, width and height of the drawing’s own coordinate system. The browser maps that box onto whatever space the image gets on the page, which is why one file can be drawn at any size.26

Inside, drawings are built from a few shapes. MDN’s tutorial lists seven basic ones: rect, circle, ellipse, line, polyline, polygon and path.27 A path is a single line of drawing commands in its d attribute, and MDN calls it “the most general shape that can be used in SVG,” able to draw all the others plus curves.27

Several other features make SVG useful on websites:

  • Styling with CSS. Painting properties such as fill and stroke can be set in a style sheet as well as in attributes, though geometry such as width, height and path commands cannot.28
  • Animation. SVG 1.1 includes animation elements, such as animate and animateMotion, taken from the SMIL Animation standard and developed with the W3C’s Synchronized Multimedia (SYMM) Working Group.29 SVG 2 describes support for both declarative and scripted animation.3
  • Reuse. The use element copies a shape defined elsewhere in the document, so a page can define an icon once and draw it many times.30
  • Text. Words in an SVG stay as real text, which can be searched, indexed and translated by editing the file.1

SVG is often compared with two other ways of putting pictures on a page:

FeatureSVGPNG, JPEG, WebPHTML canvas
What is storedShapes and text as XML instructions1Raster images (grids of pixels)31A bitmap drawn by scripts32
ScalingSharp at any size1Fixed pixel size31Resolution-dependent32
Styled by CSSYes, when placed in the page28NoNo

How an SVG file is added to a page changes what it can do. Shown with the img element or as a CSS background, it counts as an image: browsers may disable its scripts and block it from loading outside files. Those limits do not apply when the SVG is opened directly or embedded as a document with iframe, object or embed.33 For screen readers, an SVG drawn in the page can carry a title element, which gives it an accessible name and usually appears as a tooltip.34

SVG 2 and SVG today

The earliest SVG 2 draft in the W3C’s publication history is a Working Draft dated August 28, 2012. It reached Candidate Recommendation, the stage where a standard is tested in browsers, on September 15, 2016, and was published again at that stage in August and October 2018.16

The newest snapshot is dated October 6, 2026. Its editors come from Apple, Microsoft and Adobe, and the W3C expects it to become a Recommendation no earlier than December 1, 2026.3 SVG 2 builds on SVG 1.1 Second Edition and adds closer ties to the rest of the web platform, including sections on styling SVG with CSS, WAI-ARIA accessibility attributes and the data attributes used in HTML.3 Three features are marked “at risk,” meaning they may be dropped: multiple title or desc elements for different languages, nested links, and most vector-effect options.3

As of October 22, 2026, the SVG Working Group is chaired by Dirk Schulze, and its charter runs until November 30, 2026.35 Inkscape, a free and open-source vector editor for Linux, Windows and macOS, uses SVG as its main file format.36

Timeline

  1. SVG 2 is republished as a Candidate Recommendation Snapshot3
  2. SVG 2 reaches Candidate Recommendation16
  3. SVG 1.1 Second Edition becomes a W3C Recommendation12
  4. Firefox 4 allows SVG inside HTML and in the img element24
  5. Internet Explorer 9, the first Internet Explorer with SVG support, is released23
  6. Microsoft details initial SVG support in the IE9 Platform Preview22
  7. Microsoft says it has asked to join the SVG Working Group21
  8. SVG Tiny 1.2 becomes a W3C Recommendation15
  9. WebKit turns SVG on by default20
  10. Firefox 1.5 is released with SVG support17
  11. SVG 1.1 and the Mobile SVG Profiles become W3C Recommendations12
  12. SVG 1.0 becomes a W3C Recommendation2
  13. First public working draft of SVG10
  14. Date of the VML Note from Microsoft and partners9
  15. Date of the PGML Note from Adobe, IBM, Netscape and Sun8

What it means for your website

Most site owners meet SVG as a logo or icon file. It is a good choice for anything made of flat shapes and text, and a poor one for photographs, which are better stored as raster images (grids of pixels) such as JPEG, WebP or AVIF.131

  • Ask your designer for an SVG logo. One file stays sharp at every size, which suits a responsive design that has to fit phones and wide screens alike.26
  • Be careful with uploads. SVG files can contain scripts, which the media type registration calls executable content.6 Browsers may disable those scripts when the file is shown as an image, but not when someone opens the file’s own address.33 That is why WordPress leaves SVG out of its default list of allowed uploads.37 On self-hosted WordPress, which we build on every week, add SVG support only through a plugin that cleans files on upload, and only upload SVGs from people you trust.
  • Write alt text. Google Images indexes SVG files along with JPEG, PNG, WebP and AVIF, and treats alt text as the most important extra information about an image.38 Alt text also helps people who use screen readers, and Google points to the W3C’s images tutorial, which explains how to write text alternatives that meet the WCAG accessibility guidelines.3839 For an SVG placed directly in the page, add a title element instead.34
  • Keep a PNG or ICO favicon. As of October 22, 2026, Google’s list of favicon formats for search results includes BMP, GIF, ICO, PNG, JPEG, PPM and TIFF, but not SVG.40
  • Logo in email inboxes. BIMI, a standard that shows a brand logo next to authenticated email, requires a stricter profile called SVG Portable/Secure, which allows no scripts or animation. The BIMI Group also recommends a square image and a file no larger than 32 kilobytes.41 Our guide to websites and email explains the sender rules that come first.

If you use a hosted builder, check its help pages before uploading an SVG to see whether, and where, it accepts the format. Our WordPress review covers how much control self-hosting gives you.

See also

References

  1. SVG: Scalable Vector Graphics. MDN Web Docs, Mozilla. accessed October 22, 2026.
  2. Scalable Vector Graphics (SVG) 1.0 Specification (W3C Recommendation). W3C. 2001-09-04. accessed October 22, 2026.
  3. Scalable Vector Graphics (SVG) 2 (W3C Candidate Recommendation Snapshot). W3C. 2026-10-06. accessed October 22, 2026.
  4. Usage statistics of image file formats for websites. W3Techs. 2026-10-22. accessed October 22, 2026.
  5. Media type image/svg+xml. Internet Assigned Numbers Authority (IANA). accessed October 22, 2026.
  6. Appendix P: Media Type Registration for image/svg+xml, SVG 1.1 (Second Edition). W3C. 2011-08-16. accessed October 22, 2026.
  7. Secret Origin of SVG. SVG Working Group wiki, W3C. accessed October 22, 2026.
  8. Precision Graphics Markup Language (PGML) (W3C Note). W3C. 1998-04-10. accessed October 22, 2026.
  9. Vector Markup Language (VML) (W3C Note). W3C. 1998-05-13. accessed October 22, 2026.
  10. Scalable Vector Graphics (SVG) Specification (W3C Working Draft). W3C. 1999-02-11. accessed October 22, 2026.
  11. World Wide Web Consortium Issues Scalable Vector Graphics (SVG) 1.0 as a Recommendation. W3C. 2001-09-05. accessed October 22, 2026.
  12. Scalable Vector Graphics (SVG) 1.1 (Second Edition): publication history. W3C. accessed October 22, 2026.
  13. Scalable Vector Graphics (SVG) 1.1 (Second Edition) (W3C Recommendation). W3C. 2011-08-16. accessed October 22, 2026.
  14. Mobile SVG Profiles: SVG Tiny and SVG Basic (W3C Recommendation). W3C. 2003-01-14. accessed October 22, 2026.
  15. Scalable Vector Graphics (SVG) Tiny 1.2 Specification (W3C Recommendation). W3C. 2008-12-22. accessed October 22, 2026.
  16. Scalable Vector Graphics (SVG) 2: publication history. W3C. accessed October 22, 2026.
  17. Firefox 1.5 release notes. Mozilla. 2005-11-29. accessed October 22, 2026.
  18. Firefox 1.5 for developers. MDN Web Docs, Mozilla. accessed October 22, 2026.
  19. SVG (basic support). Can I use. accessed October 22, 2026.
  20. SVG on by default (Eric Seidel). webkit-dev mailing list, WebKit. 2005-12-15. accessed October 22, 2026.
  21. Microsoft Joins W3C SVG Working Group (Patrick Dengler). IEBlog, Microsoft. 2010-01-05. accessed October 22, 2026.
  22. SVG in IE9 Roadmap (Jennifer Yu). IEBlog, Microsoft. 2010-03-18. accessed October 22, 2026.
  23. Microsoft To Release IE 9 on March 14 (Kurt Mackie). Redmond Magazine. 2011-03-09. accessed October 22, 2026.
  24. Firefox 4 for developers. MDN Web Docs, Mozilla. accessed October 22, 2026.
  25. HTML Living Standard: 4.8.15 MathML and 4.8.16 SVG. WHATWG. accessed October 22, 2026.
  26. viewBox. MDN Web Docs, Mozilla. accessed October 22, 2026.
  27. Basic shapes. MDN Web Docs, Mozilla. accessed October 22, 2026.
  28. Fills and strokes. MDN Web Docs, Mozilla. accessed October 22, 2026.
  29. Animation, SVG 1.1 (Second Edition). W3C. 2011-08-16. accessed October 22, 2026.
  30. <use>. MDN Web Docs, Mozilla. accessed October 22, 2026.
  31. Portable Network Graphics (PNG) Specification (Third Edition). W3C. 2025-06-24. accessed October 22, 2026.
  32. HTML Living Standard: 4.12.5 The canvas element. WHATWG. accessed October 22, 2026.
  33. SVG as an image. MDN Web Docs, Mozilla. accessed October 22, 2026.
  34. <title>: the SVG accessible name element. MDN Web Docs, Mozilla. accessed October 22, 2026.
  35. SVG Working Group. W3C. accessed October 22, 2026.
  36. About Inkscape. Inkscape Project. accessed October 22, 2026.
  37. wp_get_mime_types(). WordPress Code Reference, WordPress.org. accessed October 22, 2026.
  38. Google image SEO best practices. Google Search Central. accessed October 22, 2026.
  39. Images Tutorial. W3C Web Accessibility Initiative (WAI). accessed October 22, 2026.
  40. Define a favicon to show in search results. Google Search Central. accessed October 22, 2026.
  41. Creating BIMI SVG Logo Files. BIMI Group. 2020-08-10. accessed October 22, 2026.

Web Building Encyclopedia. First published October 22, 2026. Last reviewed October 22, 2026. Every fact on this page is linked to a source we opened. Spotted an error? Write to [email protected].