What is svg format. What is SVG: pros and cons of using it

SVG (Scalable Vector Graphics) is a very rich scalable vector graphics file written in the XML markup language. Let's find out which software solutions can be used to view the contents of objects with this extension.

Considering that Scalable Vector Graphics is a graphic format, it is natural that viewing these objects is supported primarily by image viewers and graphic editors. But, oddly enough, still rare image viewers cope with the task of opening SVG, relying only on their built-in functionality. In addition, objects of the studied format can be viewed using some browsers and a number of other programs.

Method 1: Gimp

First of all, let's look at how to view drawings of the format being studied in a free graphics editor.

Method 2: Adobe Illustrator

The next program that can display and change images of the specified format is.

Method 3: XnView

We will begin our examination of image viewers that work with the format under study with the program.

There is another option to view SVG in XnView. This is done using the built-in browser.

Method 4: IrfanView

The next image viewer, using the example of which we will look at viewing the type of drawings being studied, is. To display SVG in the named program, the CAD Image DLL plugin is also required, but unlike XnView, it is not initially installed in the specified application.

You can view the picture in this program by dragging and dropping the file from "Conductor" into the IrfanView shell.

Method 5: OpenOffice Draw

The Draw application from the office suite can also view SVG.

You can also view the image by dragging the file into the OpenOffice startup shell.

You can also launch it through the Draw shell.

Method 6: LibreOffice Draw

Scalable Vector Graphics is also supported by its competitor OpenOffice, an office suite that also includes an image editing application called Draw.

Another opening method involves dragging the file from the file manager into the LibreOffice startup shell.

Also in LibreOffice, like the previous software package we described, you can view SVG through the Draw shell.

Method 7: Opera

SVG can be viewed in a number of browsers, the first of which is called .

Method 8: Google Chrome

The next browser that can display SVG is .

Method 9: Vivaldi

The next web browser, which will be used as an example to view the ability to view SVG, is .

Method 10: Mozilla Firefox

Let's determine how to display SVG in another popular browser - .

Method 11: Maxthon

In a rather unusual way, you can view SVG in a browser. The fact is that in this web browser, activating the opening window is basically impossible: neither through graphical controls, nor by pressing hot keys. The only option to view the SVG is to enter the address of this object into the address bar of the browser.

Of course, this option for opening vector drawings located locally on your hard drive is much more inconvenient and complicated than other browsers.

Method 12: Internet Explorer

Let's look at the options for viewing SVG using the example of a standard browser for Windows operating systems up to and including Windows 8.1 - .

Despite the fact that SVG is a vector image format, most modern image viewers cannot display it without installing additional plugins. Also, not all graphic editors work with this type of image. But almost all modern browsers can display this format, since it was once created primarily for posting pictures on the Internet. True, in browsers it is only possible to view, and not edit, objects with the specified extension.

Very few users encounter files with the .svg extension, and in most cases, not just some, but almost all users delete such files, as they say, indiscriminately, without thinking at all about what program the SVG file was originally associated with. Now we will talk about how you can open a file for editing and, in general, whether it is worth doing.

Extension.svg: how to open it?

First, let's look at the simplest concepts. For an uninitiated user, the question of how to open an SVG file may remain unclear. Here it is worth paying attention to the fact that initially files of this type are intended for graphics processing with a change in raster or vector mode. If the end user is, as they say, a layman in this matter, then there is nothing to explain to him.

For the rest of the audience, we note that the problem itself, how to open the SVG format, in most cases is associated only with the choice of the appropriate application installed by default or similar.

by default?

As you know, the easiest way to open a file of any type is to double-click in regular Explorer. In this case, the operating system (in this case, Windows) itself determines which tool from its set will be used to open a file of a given type. At the same time, the SVG file is, in fact, universal.

Essentially, any program that supports the Scalable Vector Graphics standard, which is where the acronym comes from, can work with it without problems. In principle, the same Adobe Illustrator or the latest version package or similar software packages are capable of processing files of this type. If the applications are installed, there should be no problems.

But if you use some simple utility such as the usual Microsoft Paint, Paint .NET, or the editors included in the main Microsoft Office package of any version and year of release, you can’t count on anything special. Although they can work with such data, they are not always the best editing utilities. The SVG file may not be recognized by them.

In the best case, you can simply view the image, change its position on the sheet, slightly “edit” the colors or saturation, but otherwise everything will remain as it was (or even worse). Let's try to look at how to open an SVG file in terms of editing using related programs and applications.

SVG data processing tools

As surprising as it may sound, the .svg extension itself is not considered to be associated with the associated program, although it is considered a scalable graphics format. It doesn't really matter how you open an SVG file. In principle, if there are a sufficient number of installed programs and applications, the operating system itself will offer to select the most suitable application (any Adobe package, variations of Paint, Corel, etc.).

Here, by the way, we should not forget that the same problem associated with how and with what to open an SVG file has the other side of the coin. The fact is that files of this type may contain HTML or XML markup. So you will have to edit such data using specialized utilities.

Bottom line

In general, if we evaluate this issue, so to speak, from a global perspective, it can be noted that the discovery of SVG does not go beyond generally accepted concepts.

And this is understandable, because the format itself and the accompanying extension relate to graphics, which means that opening for viewing and the ability to edit are provided initially, and regardless of the presence of special editors, and even more so, operating systems.

In general, we can only recommend installing universal clients like ACDSee or something similar, which are capable of not only recognizing an SVG file at the initial level (initialization, mapping to applications, viewers, etc.), but also working with it in full mode editing, the use of which can change even the very structure of the desired file. In this sense, it can support any internal external changes, even regarding attributes.

To design any web page, you need both static graphics and a variety of animated and interactive elements, which, firstly, make the information presented on it more attractive, and secondly, contribute to a better perception of the material.

Graphic information is transmitted much slower than text information, and the loading time of images is directly dependent on the size of their graphic files, so fast loading of web pages presupposes the small size of the graphic images embedded in them. The latter is achieved through the optimal choice of graphic file format, as well as through optimization, the task of which is to find a compromise between the page loading speed and the quality of the images presented on it. However, the optimization possibilities are not unlimited, and high-quality images tend to be large, so achieving high quality web images in small sizes remains a major challenge.

But the question is not only about size and quality - developing a design for a web page turns out to be a matter that requires the designer to know a wide range of diverse technologies and software products, since for different types of graphic information it is necessary to use various file formats and different technologies for their creation. For static graphics, GIF, JPG or PNG formats are used, which can be created in a variety of graphics packages. For animated objects, the animation GIF and Flash formats are used, and such objects are developed in specialized software applications (specific for each of these types of formats). Interactive elements (rollovers, ImageMap links, etc.) are also, as a rule, created in specialized applications and represent a set of graphic images, the connection between which is established in a file with HTML code that complements them.

A successful solution to these problems can be the transition to the SVG graphic format (Scalable Vector Graphics scalable vector graphics), based on the XML language, thanks to which any SVG image can be represented by a set of command lines (Fig. 1), and the SVG file itself can be opened in any text editor, including Notepad. This relatively new technology was originally developed by Adobe specifically for the web, and today is of great interest for mobile devices, providing the creation of high-quality static, animated and interactive graphics. Therefore, it is not surprising that it is actively supported by the W3C consortium (http://www.w3.org/Graphics/SVG) in 2003, the SVG 1.1 standard was adopted by the W3C as a recommendation, and the specification is currently being developed SVG 1.2 (http://www.w3.org/TR/SVG12/).

SVG technology allows you to combine text, graphics, animation and interactive components in one format and is based on three types of graphic images: vector shapes, pictures and text. Shapes, as is customary in vector graphics, are represented either by rectilinear and curvilinear contours, or graphic primitives (rectangles, ellipses, etc.), and drawings are imported raster images. In addition, the SVG format supports various types of animated (reminiscent of GIF and Flash animation) and interactive objects, such as rollovers, link maps, and other navigation elements. And since this standard is based on the XML language, the SVG file, along with elements intended for visual display, can also contain various metadata.

Pros and cons of using the SVG format

Using the SVG format allows you to develop smaller, faster-loading, high-quality, versatile graphics for the web and mobile devices that no other graphics format can provide. The main advantages of the SVG graphic format include the following:

• high quality of images regardless of their size, which is explained by the vector nature of the SVG format. Images can be indefinitely reduced or enlarged without loss of quality (Fig. 2) in accordance with the size of the display, which allows you to obtain high-quality images of graphic information on various types of devices (desktops, pocket computers, etc.), and also makes it possible to more carefully examine individual details this is important, for example, when working with technical drawings;
• much smaller file size compared to GIF, JPG, PNG and animation GIF formats, and even more so with the Flash format. For example, if the GIF file tested for the article, compressed in LZW compression mode, was 26 KB, then the size of the corresponding SVG file took 1220 bytes, and when compressed in the SVGZ format it was only 685 bytes.

But it's not just that. Compared to traditional options for graphically representing the Web, the use of the SVG format has many other undeniable advantages.

So, for developers the important advantages are:

• the ability to combine static, animated and interactive elements in one format, as well as a combination of vector and raster objects;
• improved text handling, including kerning, curved text and unlimited font use;
• more efficient control of color accuracy and the widest possibilities for using high-resolution gradient fills, shadows, filters, etc. in web images;
• the textual nature of the SVG format and its support for cascading style sheets, which greatly simplifies the process of updating a website and allows, if necessary, to make changes to it without resorting to special programs;
• integration with databases built on XML (Extensible Markup Language) and CSS (Cascading Style Sheets) standards, which allows you to save SVG images in the database and create dynamic web pages using them - different for different platforms, personal settings, etc. d.;
• no indexing problems SVG files are indexed by any search engines (unlike, for example, SWF files).

Users will enjoy high-quality, fast-loading SVG content. In addition, it is possible to copy the text located on the SVG image, and thereby save some useful information for yourself, as well as search for text in the image, which in some cases may be extremely necessary, for example, when searching for the desired name on a map or drawing .

However, as usual, along with the advantages, SVG technology also has disadvantages, and very serious ones.

• SVG images are poorly supported by Internet browser manufacturers. As a result, to view SVG graphics from the browser, users are forced to additionally install a third-party plugin that provides this capability, for example SVG Viewer from Adobe. In theory, this is not difficult; the corresponding plugins are easy to install, free, small in size, and can be quickly downloaded from the Internet. In practice, everything turns out to be much more complicated, since most Internet users are not aware of the existence of these capabilities and therefore cannot view this type of graphics; without the plugin, it is simply not visible. However, the situation is gradually changing, and in the past year two leading web browser developers have introduced support for the SVG format. In the spring, Opera Software released version 8 of the Opera browser, which supports SVG 1.0 Tiny; in the version of Opera 9.0 that appeared a little later, partial support for the SVG 1.0 Basic format was implemented. The second developer to include SVG support was The Mozilla Organization. The Mozilla SVG project module, which provides viewing of SVG graphics of the 1.1 specification, was included in its Firefox 1.5 browser. In addition, in mid-2005, the developers of the Safari browser operating on computers running Mac OS X began active work to introduce support for SVG 1.1;
• Compared to other graphic formats, the SVG format is still poorly supported by graphics software developers, although leading graphics packages such as Adobe Illustrator, Corel DRAW, etc. allow you to export graphics to SVG files. Of course, SVG files can be created in any text editor, but this is not practical in terms of speed and cost of development. It is convenient to edit a file in a text editor if necessary (which, by the way, is only possible if you have deep knowledge of XML technology), but creating it from scratch is unwise, since it will require excessive time and effort. To do this, we need simple and convenient tools for rapid visual development of graphics in the Scalable Vector Graphics format with the ability to edit the program code corresponding to the image in the same environment, but there are very few such products and they are not well known.

As a result, a very sad situation arises: many users cannot yet view SVG graphics due to the lack of support for it in web browsers at the proper level, web developers practically do not develop SVG graphics, no matter how attractive they may be, and software developers do not indulge web designers with a variety of applications focused specifically on SVG. The result is a vicious circle: “If there is no content, then people do not need an SVG implementation, and if there is no implementation, then there is no content” this is exactly how the situation was described at one of the W3C consortium meetings.

But you can look at the situation from the other side: support for SVG (although not yet in full) by two popular Internet browsers, as well as the interest in the technology of famous developers, suggests that the “ice has broken” and that SVG has a real a chance to become one of the popular formats for presenting web information. This chance is also increasing due to the growing interest in SVG technology in relation to mobile devices, where the requirements for image size and quality are much higher. Opera Software, for example, plans to first implement full support for the SVG format on desktops and only then transfer it to mobile platforms. Therefore, it’s time for web designers to think about using SVG, otherwise they risk being left behind in the near future.

Plugins for viewing SVG graphics

As already noted, for now, most users will have to use one of the suitable plugins to view SVG graphics in full in an Internet browser window, the most famous of which are the free Adobe SVG Viewer and Corel SVG Viewer modules. The first of them, Adobe SVG Viewer, comes as a separate application, is compact and convenient, works on different platforms, supports a large number of Internet browsers, and is therefore much more popular among users. The Corel SVG Viewer application is included in the Corel Smart Graphics Studio package, but is also available as freeware.

There are other options for viewing SVG graphics; you can, for example, use the corresponding modules from the packages Amaya (http://www.w3.org/Amaya/), Apache Batik (http://xml.apache.org/batik), KDE KSVG (http://www.kde.org), etc. A complete list of applications that provide viewing of SVG images is given at: http://wiki.svg.org/Viewer_Implementations.

Adobe SVG Viewer

Developer: Adobe Systems, Inc.

Distribution size: 2.25 MB

Distribution method: freeware (http://download.adobe.com/pub/adobe/magic/svgviewer/win/3.x/3.03/en/SVGView.exe)

Price: for free

Work under control: Windows 95/98/Me/NT/2000/XP, Mac OS 8.6/9/X, Linux, Solaris

Browser support: Internet Explorer 4.0 or higher, Netscape Navigator or Communicator 4.5 to 4.78 (except 6.x)

Corel SVG Viewer

Developer: Corel Corp

Distribution size: 4.9 MB

Distribution method: freeware (the module can be downloaded from: http://www.corel.com/servlet/Satellite?pagename=Corel/Downloads/Details&id=1042152917172)

Price: for free

Work under control: Windows 98/NT/2000/Me/XP

Browser support: Microsoft Internet Explorer 5.5 and higher, Netscape Navigator or Communicator versions 4.79, 7.02

Programs for creating SVG graphics

All programs for creating SVG graphics can be divided into three large groups. The first includes popular two-dimensional graphics packages that are focused on working with vector graphics and at the same time allow you to export images to the SVG format. The most popular of them are Adobe Illustrator and CorelDRAW; in addition, such export to one degree or another supports many other applications: AutoCAD, Microsoft Visio, etc. The main advantage of this group of applications is that they have advanced tools for creating vector images and allow you to achieve unique effects through the use of transparency, gradient fills, various filters, etc. But these applications require serious special training and therefore are mainly designed for professional designers. In addition, they are by and large not focused on SVG design (although they allow you to obtain graphics in the Scalable Vector Graphics format) while providing convenient visual creation and display of images, these applications do not allow them to be adjusted at the text level, which is relevant for SVG- graphics. It is also significant that support for the Scalable Vector Graphics format is not fully implemented in them, as a result of which not all vector image elements can be exported to SVG without errors.

The second group of software products consists of packages designed exclusively for creating SVG graphics. They have much less capabilities in terms of visual development of vector images, although they include all the necessary tools. But they provide convenient tools for editing source code and allow you to work with SVG objects in parallel, both visually and at the code level, and you can easily switch between these options for presenting information. All applications from this group are very simple and accessible and do not require much time to learn. In addition, they have relatively small distributions (compared to applications of the first group), so they can be purchased via the Internet without any problems. However, there are very few programs with such capabilities, and below we will consider in detail only four that are of the greatest interest and designed for different categories of users. A complete list of applications available for creating SVG graphics can be found at: http://wiki.svg.org/Design_Tools.

And finally, the third group can include any text editors, including a regular notepad. As noted above, the Scalable Vector Graphics format is based on the XML language, which allows you to create and edit SVG files at the text level in a text editor if necessary.

Full-featured graphics applications that let you create SVG graphics

Adobe Illustrator CS2

Developer: Adobe Systems, Inc.

Distribution size: Macintosh version 428.9 MB, Windows version 398.6 MB

Distribution method: shareware (a 30-day demo of the package is available at: http://www.adobe.com/products/tryadobe/main.jsp#product=27)

Price:$665

Work under control: Windows 2000 with Service Pack 3 or Windows XP, Mac OS X versions 10.2.4 to 10.2.7, Java Runtime Environment 1.4.1

Starting from version 9, Adobe Illustrator (Fig. 3) has implemented the import and export of SVG files, and at a much higher level compared to similar graphic applications. The package supports all existing SVG specifications, ISO 8859-1, UTF-8 and UTF-16 encodings, various text export options, and allows you to export images in both regular SVG and compressed SVGZ formats.

In the SVG graphics created in its environment, you can use gradients, transparency, as well as a whole series of specially designed SVG effects (Effect=>SVG Filters) in the form of various shadows, blurs, etc. Images with such effects remain clear when viewed in web browser with any magnification. In addition to static graphics, Illustrator also allows you to create interactive graphics in SVG format; for this purpose, a special SVG Interactivity palette is provided (it can be opened from the Window=>SVG Interactivity menu), in which actions for interactive objects are specified. It's worth noting that working on interactive SVG elements in Illustrator requires knowledge of Java Script and an understanding of the basic principles of object-oriented programming. In addition, using the Scalable Vector Graphics format in this program, you can create Dynamic Data-Driven Graphics.

CorelDRAW Graphics Suite 12

Developer: Corel Corp.

Distribution size tiva: 200 MB

Distribution method: shareware (the demo version can be downloaded from online store sites, for example at: http://allsoft.ru/Download.php?ver=17605)

Price:$290 (Allsoft.ru)

Work under control: Windows NT/2000/XP

The well-known application for developing professional vector graphics, CorelDRAW (Fig. 4), included in the CorelDRAW Graphics Suite 12, provides import and export in SVG and SVGZ formats at a basic level, and therefore can be used to create static and interactive SVG graphics.

The application provides support for unrecognized data, attributes and metadata, and also provides the ability to preview SVG files in the browser before exporting. In addition, Unicode encoding is possible for UTF-8 and UTF-16 encoding methods and various options for exporting text and bitmap images. The latest version has significantly improved support for exporting symbols, text, shadows, outlines, layers, embedded binary images, etc.

Mayura Draw 4.3

Developer: Mayura Software

Distribution size: 1.3 MB

Distribution method: shareware (demo version http://www.mayuradraw.com/mdraw.zip)

Price:$39

Work under control: Windows 95/98/Me/NT/2000/XP

Mayura Draw (Fig. 5) is a very simple and cheap vector graphics creation program designed for the general user. The resulting vector images can be exported to SVG format if desired, and therefore Mayura Draw can be a possible solution for developing static SVG graphics. The program supports all basic vector graphics tools and allows you to obtain vector images based on graphic primitives, linear and curvilinear contours and text. The list of its capabilities includes convenient means of aligning, distributing and organizing objects, managing transparency, using guides and rulers for precise placement of objects, and various transformations.

Specialized packages for creating SVG graphics

EvolGrafiX XStudio 6.1

Developer: EvolGrafiX

Distribution size: 7.25 MB

Distribution method: http://www.evolgrafix.de/htDocs/files/trials/xstudio6x/XStudio6-Trial.exe)

Price:$449 commercial license, $249 academic license

Work under control: Windows 2000/XP

The professional package XStudio (Fig. 6) is a convenient tool for creating diverse SVG graphics for the Web and mobile devices and provides full control over both the SVG project as a whole and over vector images, animation, scripts, etc. The application is convenient , an intuitive and easily customizable user interface, provides a wide range of tools, is fast, allows you to create SVG graphics of all existing specifications and supports all Scalable Vector Graphics styles. All this, combined with a relatively low price for a professional package, allows us to consider it the best professional solution of its kind. XStudio comes with detailed documentation, supported by a series of tutorials, and is easy to learn.

Rice. 6. Combining visual image creation with source code editing
in EvolGrafiX XStudio

The application has all the necessary capabilities for creating and processing vector images and in this regard is very similar to the Adobe Illustrator package. At the same time, XStudio is focused directly on the preparation of static, interactive and animated SVG graphics and therefore, along with classic tools for working with vector objects, it is supplemented with specific SVG capabilities. The built-in Document Object Model (DOM) toolbar provides a hierarchical representation of SVG objects, a convenient XML editor allows you to correct the source code at the text level, and a script editor allows you to supplement it with Java scripts. Working with code is organized very conveniently: code fragments of the selected object are automatically highlighted, it is possible to search for text and set bookmarks, etc. Any code changes are instantly reflected in the visual viewing window, and visual changes are reflected in the editor window.

Inkscape

Developer: IOSN (International Open Source Network International Open Source Network)

Distribution size: 8.7 MB

Price: for free

Work under control: Windows 9x/NT/2000/XP, Mac OS X, Linux

Inkscape (Fig. 7) is the most promising vector editor based on the Open Source model, which is multi-platform and is a powerful tool for developing graphics in accordance with the Scalable Vector Graphics standard. In its functionality for working with vector images, as well as its interface, Inkscape is very similar to CorelDRAW. It supports alpha channels, working with layers, using flowing text, spectacular gradient fills, a large number of filters and effects, various transformations, convenient work with paths and objects, grouping objects and much more. You can import data from JPEG, PNG and TIFF files and embed them into SVG images.

However, unlike CorelDRAW, Inkscape is positioned as an application for SVG designers, therefore, along with classic visual graphics creation, it provides the ability to directly process XML code in the built-in text editor. The program is configured to save images in regular and compressed SVG files, although they can be converted to common vector and raster formats if desired.

The Inkscape package has a convenient Russified interface, is easy to learn and comes with a good help system, including a variety of examples of use, and in addition, this application is free - all this makes it very attractive to a wide range of users. The main disadvantages of the program are its low operating speed and increased requirements for system resources.

Corel WebDraw

Developer: Corel Corp

Distribution size: 15.6 MB

Distribution method: shareware (30-day demo http://www5.jasc.com/pub/wdw102ev.exe)

Price:$179 download version, $199 CD version

Work under control: Windows 98/NT4/2000/Me/XP

Corel WebDraw (Figure 8), better known as Jasc WebDraw, is a comprehensive solution for creating high-quality SVG graphics and animations aimed at professional designers. And the intuitive interface of the program makes it attractive to a wide range of users.

The application provides an extensive set of standard graphic tools typical for a full-featured vector graphics application: basic shapes (ellipse, rectangle, star, etc.), pen, polygon, polyline, text, etc. Along with vector objects, WebDraw allows you to supplement SVG objects with external raster images. In addition to regular fills and overlaying ready-made styles, you can use complex gradients, fills, including patterns created by yourself. To get more effective images, you can use filters, both quite simple (blurring and shadowing) and complex (texturing and lighting). Grids, guides, and rulers help you place objects precisely, and the built-in Document Object Model (DOM) toolbar presents SVG objects in a hierarchical tree for easy management.

WebDraw is equipped with a universal animation storyboard line, the Animation Timeline, which is built on the basis of the SVG DOM (Document Object Model), which allows you to select and animate almost any attribute or property of an object of all types at any time. The drag-and-drop mechanism allows you to edit the start and end points of the animation, as well as the duration of each animation phase, directly in the timeline. Because animation keytimes are inserted every time you set animation parameters for an attribute or property of an object, they can be transferred to other areas of the storyboard to automatically adjust the distribution of animation effects over time.

The package allows you to work with SVG graphics in two versions: both with a set of visually displayed graphic objects and with the corresponding source code. Editing source code in the built-in SVG file text editor provides additional flexibility and control over file content. Automatic checking of changes in the source code helps to ensure the correct behavior of the created graphics, and found errors are marked in color, which saves the designer from hours of searching through hundreds of lines of code. The result of any changes in the source code is immediately displayed on the screen. If desired, you can import, edit and optimize SVG files created in other applications into WebDraw.

Sketsa SVG Editor 3.2.3

Developer: KIYUT

Distribution size: 5.99 MB

Distribution method: shareware (demo that adds a tag to an image, http://www.kiyut.com/products/sketsa/sketsa.zip)

Price:$49

Work under control: Windows 2000/XP, Java VM (JRE) 1.5 and higher (http://www.java.com/getjava), UNIX and Linux

The Sketsa application (Fig. 9) is one of the most popular SVG editors and allows you to create professional SVG graphics, including optimization in the SVGZ format. The package successfully combines simplicity and ease of use with a wide range of features and is compatible with Windows, Mac and Linux systems.

Sketsa supports a classic set of tools typical for any vector application, allowing you to create and transform any vector objects based on both contours and graphic primitives and text, which, if desired, can be easily supplemented with raster images. You can control transparency, use gradient fills and filters. All this is successfully complemented by specialized SVG capabilities, thanks to which any image can be edited not only visually, but also in text mode. To edit SVG code, the package provides a built-in XML text editor. For ease of object management, there is a built-in Document Object Model (DOM) toolbar, which is a hierarchical tree-like set of objects in an SVG document, which allows you to select any document object to edit its properties.

This article will talk about the SVG graphic format. We will find out what kind of technology this is, find out what the advantages and disadvantages are. This format is considered relatively old, however, its popularity is still great to this day. What are the reasons for such popularity? How is SVG different from other graphics technologies? Let's try to answer these questions.

What is SVG?

SVG (Scalable Vector Graphics) is a vector graphic format. This technology will allow you to create images that can later be scaled without losing the quality of the graphics. Looking ahead, we can note that SVG files do not require much storage space, and the capabilities of this format are impressive.

In most cases, this graphic format is used when creating adaptive websites and some animations. Let's look at some examples of using the SVG format:

• logos;
• background for the site;
• buttons;
• maps, diagrams.

Pros of using SVG

So, let's look at some good reasons to use the SVG graphic format in your web projects.

1. As already mentioned, SVG is a vector graphic format, it is good to use when creating responsive websites. Graphic elements of such sites should be displayed without distortion at any screen resolution.

2. This format has a small “weight” due to its ability to be well compressed. This is very important, since any site should ideally load quickly.

3. Ease of use - the format allows you to set the necessary settings for color, shadow, blur and other design effects.

4. The SVG format is supported by all modern browsers. This is very important because... any modern website should display equally well on any browser.

5. To work with SVG files, it is enough to use any available text editor, which allows you to achieve some degree of freedom in your actions. You can work as you wish, depending on the specific tasks, as well as the degree of competence in this area.

Cons of using SVG

Are there any downsides to SVG? There are practically none, but they still exist. So, this format is not supported by outdated browsers such as Internet Explorer 8. In addition, it should be noted that SVG cannot be used in photographs; it is used exclusively for making all kinds of lines and shapes.

Instead of a conclusion

As can be seen from all of the above, the SVG vector graphic format has many advantages; it has practically no disadvantages. So why not use SVG on your websites? This graphics format is very popular, its popularity is growing every day, and it is increasingly used when creating web projects.

Announcement

SVG Vector image file format

SVG files are XML-based 2D vector images. The SVG format specifications are open to third parties. They were developed by the World Wide Web Consortium (W3C). The SVG format supports interactivity and animation, and allows users to search, index, and compress images. Although text editors can open, create, and edit SVG files because they are XML files, the most popular programs for creating such files are graphics editors. Most web browsers support displaying SVG files to some extent. Moreover, SVG files allow for lossless data compression. They can contain raster, vector images, as well as text. In 2001, the SVG Mobile format was released with version 1.1, which allowed mobile device users to open and view SVG files.

Technical information about SVG files

The SVG format defines the use of vector graphics for online use using the XML format. Scaling and resizing does not affect image quality. All parts and sections of SVG files can be animated. W3C standards (including DOM and XSL) are included in the SVG format as recommended by the W3C consortium. Unlike raster images, vector graphics (particularly SVG files) are made up of fixed sets of shapes, allowing you to enlarge and scale them without losing quality. SVG files allow you to use complex graphic elements; They are also compatible with CSS styles, which allows for a higher level of post editing.

More information about the SVG format