What is an SVG File? – Pros, Cons, XML Code

Let’s talk about SVGs!

Scalable Vector Graphics (SVG) is a powerful XML-based language for creating two-dimensional vector and mixed vector/raster graphics. Unlike traditional bitmap images ( PNG, JPG, etc.), which rely on a grid of pixels, SVG images are defined through geometric primitives such as lines, curves, shapes, and text. These vector objects are stored as commands, numbers, and formulas, not in a pixel grid as in bitmaps. As a result, SVGs can be scaled infinitely without losing quality, making them ideal for icons, logos, illustrations, and even complex visualizations like charts or SVG sprites.

One of the standout features of SVGs is their text-based nature. Written in simple XML code, SVGs are human-readable and can be edited directly or programmatically. This structure provides a unique SEO benefit – search engines like Google can crawl and understand SVG files, extracting keywords and other data embedded in the graphics, which can help a website rank higher in search results.

SVG format has all the vector graphics advantages, as well as many other pros over bitmap image formats. Vector file format is widely used on the Web, and understanding the basics of SVG will be helpful for developers.

You can create an SVG file using graphical editors like Inkscape, Adobe Illustrator, CorelDRAW, and Figma, which provide user-friendly interfaces for creating and editing SVG files visually, making them very popular. But in this article, we will focus on how to create SVG by writing XML code or converting raster images to SVG.

How does an SVG file work?

An SVG file is written in the XML markup language. The XML code in the SVG document defines all the shapes, paths, colors, and text that make up the image. The SVG code can be embedded directly into HTML or saved to an SVG file and inserted like any other image. As the entire content of an SVG file is text, you can open one in a text editor, read, and edit SVG code. You can use a modern web browser such as Chrome, Firefox, or Edge to open and view online SVG images without downloading them. You can easily identify an SVG file by its .svg extension. However, knowing SVG basics to understand how it should be displayed will be helpful.

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.

Let’s look at a simple example. We generate an SVG image of four circles of different sizes and colors with one center:

<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" fill="#B0C4DE" />
    <circle cx="50" cy="50" r="30" fill="#DDA0DD" />
    <circle cx="50" cy="50" r="20" fill="#FFB6C1" />
    <circle cx="50" cy="50" r="10" fill="#5F9EA0" />
</svg>

The main element in SVG code is the <svg> element, which defines an SVG document fragment.

• The xmlns attribute in SVG stands for XML namespace, representing the standard elements and attributes that can be used in an SVG document according to the Scalable Vector Graphics specification. Without the xmlns attribute, the SVG code may not be rendered correctly or at all.
• The viewBox attribute defines a window through which elements of your SVG are visible. In this case, the viewbox extends from (0,0) to (300,300). For more information, please visit the SVG Coordinate Systems and Units article.
• The SVG <circle> element is used to draw a circle on the screen. You need to set the position of the SVG circle’s center and radius. In the example, we painted the circles with different colors using the fill attribute. For more information, see the SVG Shapes article.

Here is the resulting image ( circles.svg):

Click the Image!

In the image gallery, we presented some of the SVGs that can be easily created manually by writing XML code. Click on the image, and you will open the image in the browser. Also, you can save it and view the source code. You will find that once you master the basic elements such as shapes, paths, transformations, and working with color, you will be able to create your own vector images. In our documentation’s SVG Drawing – Basics Tutorial section, you will find all the necessary guides to start creating vector graphics from scratch.

The chapter SVG Drawing – Basics Tutorial is a tutorial that looks at how to draw SVG images and includes articles about SVG Coordinate Systems and Units, SVG Basic Shapes, SVG Path Data, SVG Text, Basic SVG Transformations, SVG Color, Fills & Strokes in SVG, SVG Embedded Content, and SVG Filters and Gradients. Our SVG Drawing Tutorial explains common rules and standard steps for creating SVG from scratch based on simple examples. We hope it helps you in your work or study.

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. This is because SVG files are made up of mathematical constructs, not pixels. The size of an SVG file depends on how much image data it contains. Complex graphics with many paths, shapes, and anchor points will take up more storage space than simpler images.

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 a text-based file in the web page, SVG image becomes accessible for screen readers and search engines that can read its code. This is very useful for people who need help reading web pages. Also, the SVG images can be searched and indexed by search engines.

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. The latest W3C Editor’s Draft was released on 08 March 2023.

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.

5. SVG Complexity. The code in SVG images can be challenging to understand if you are new to SVG file format.

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

Convert Raster Images Into SVGs – Ready to try?

One of the ways to create an SVG document is to convert a raster image into vector graphics. Aspose.SVG offers a free online tool that you can use to do this. The Image Vectorizer application is intended to convert JPG, PNG, BMP, TIFF, ICO, and GIF bitmap images to vector graphics based on geometric figures consisting of Bezier curves and lines. After conversion, all vector graphics elements are saved into SVG files.

SVG History

SVG was developed by the World Wide Web Consortium (W3C) and has a rich history that dates back to the late 1990s. In the early days of the Web, various HTML formats and extensions were developed rapidly. Clearly, a vector graphics format for the web would be helpful. The SVG Working Group was created in 1998 to provide a standard way to represent vector graphics on the web and to offer an alternative to raster image formats such as JPEG and GIF.

By 1998, there were six competing applications in the field of web vector graphics at the W3C: Web Schematics, PGML, VML, Hyper Graphics Markup Language, WebCGM, and DrawML which helped inform what eventually became the W3C’s SVG format. As a result, the SVG working group studied the general requirements for a new vector format and decided not to develop any of the existing applications but to develop a new language, taking into account the lessons learned from all the previous work. There was general agreement among the developers on the type of vector graphics tools needed – bezier curves, masks, compositing – and the SVG working group focused on this commonality rather than syntax conflicts. Basically, SVG was designed from the ground up, taking into account all previous influences.

The first version of SVG, known as SVG 1.0, was published as a W3C Recommendation on September 4, 2001. This version laid the foundation for vector graphics on the web and introduced basic shapes, text, paths, and transformations. The development of SVG 2.0 started with the goal of refining and extending the SVG specification. SVG 2.0 aims to provide new features and better integration with other web standards. The latest SVG 2.0 draft was released on 08 March 2023.

SVG took some time to gain popularity. SVG support was relatively small until 2017, when people started to see the benefits of using SVG in modern web browsers.

What are SVG files used for?

Being a vector graphics format corresponding to recent 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 use 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.

Conclusion

SVG is an essential format in modern web development, offering scalability, flexibility, small file sizes, and programmability. Unlike raster images, SVG files are text-based XML, making them editable, accessible, and SEO searchable. The ability to style and animate SVGs with CSS and JavaScript further enhances their usability.

Despite some drawbacks, such as a lack of photorealistic rendering and limited 3D support, SVG remains a widely supported standard for vector graphics. While SVGs have some limitations, such as complexity for highly detailed images and limited browser support for older versions, their benefits far outweigh these drawbacks. From icons and logos to interactive web elements and polygraphy, SVG files offer a professional and efficient way to work with vector graphics.

Mastering SVG opens up a world of creative possibilities, allowing you to craft lightweight, scalable, and highly responsive graphics for modern digital experiences.

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

Aspose.SVG offers SVG Free Web Applications for converting SVG or image files, merging SVG files, Image Vectorizing, SVG sprite generating, SVG to Base64 data encoding, and text vectorizing. These online applications work on any operating system with a web browser and don’t require additional software installation. It’s a fast and easy way to efficiently and effectively solve your tasks!