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

SVG is a vector graphic 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. This means vector SVGs can be significantly resized without loss of quality, making them ideal for icons, logos, SVG sprites, and more. Because SVGs are written in XML code, they store information in plain text rather than shapes. This allows search engines like Google to read SVG graphics for their keywords, which can help a website move up in search rankings.

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

SVG File – XML Code

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).

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.

Here is the resulting image ( circles.svg):

The chapter SVG Drawing Basics 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.

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.

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.

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.

The goal of Aspose.SVG team is to help you find out enough about SVG technology, that allows 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!