What is an SVG File and how can it be embeded?

In 1998, the World Wide Web Con­sor­tium (W3C) proposed two potential can­di­dates for a new standard markup language to create two-di­men­sion­al vector graphics based on XML. Microsoft and Macro­me­dia (today known as Adobe Systems) entered the vector markup language (VML) into the race, while IBM and Adobe among others offered up the precision graphics markup language (PGML). In the end, the W3C decided to adopt neither of the two languages as a standard and instead merge the two. On September 4, 2001, the result was published in a rec­om­men­da­tion called Scalable Vector Graphics (SVG) 1.0 Spec­i­fi­ca­tion. However, this approach made it im­pos­si­ble for the W3C to satisfy all the stake­hold­ers, and so Microsoft continued to rely on its own language – VML – for a long time in its ap­pli­ca­tions (such as Internet Explorer, versions 1 through 9). This, however, did not stop the newly in­tro­duced SVG format from becoming a great success.

When W3C scalable vector graphics became the rec­om­mend­ed spec­i­fi­ca­tion for two-di­men­sion­al vector graphics in 2001, the XML language was con­sid­ered an optimal solution for the rep­re­sen­ta­tion of such graphics, both in static and animated forms. But at the time, browsers had not yet been developed to a point that was suitable for the new SVG format; in the case of the Internet Explorer, external plugins such as the Adobe SVG Viewer and the Batik SVG Toolkit from Apache were mandatory in order to read and display XML graphics for a long time. Ad­di­tion­al­ly, web­mas­ters were faced with the task of providing a fallback solution to use PNG graphics. Since web browsers have adapted to ac­com­mo­date HTML5, time-consuming measures like this are no longer necessary; the HTML5 parser makes it possible to integrate SVG elements directly into the HTML code without spec­i­fy­ing the XML namespace that informs the browser of the context of the embedded elements. This elim­i­nates the need for a specific parser and plug-ins. In contrast to raster and pixel graphics, graphics in an SVG file format are generally dis­tin­guished by the fact that they mark out in­di­vid­ual graphical objects from a math­e­mat­i­cal stand­point and do not fit into a pixel grid. For this reason, scalable vector graphics can be used to scale geometric shapes, icons, technical drawings, fonts, icons, and logos without quality loss. These images do not show the aliasing effect typical of raster graphics, in which in­di­vid­ual pixels appear. Check out our com­par­a­tive guide to find out more about the dif­fer­ences between pixel and vector graphics.

With the continued de­vel­op­ment of internet browsers, it is in­creas­ing­ly com­mon­place to see SVG used in HTML documents, with re­spon­sive web design also playing an important role. Vector graphics’ main strength lies in their scal­a­bil­i­ty in the design of web projects across multiple devices and displays. This is just one of the many good reasons to use SVG file formats when designing your website. Other benefits include:

• Small file size: aside from their com­plex­i­ty, SVG graphics are char­ac­ter­ized by their very small file size, even when the graphics are enlarged. These image files thus provide a stable and fast per­for­mance re­gard­less of the devices used. This results in shorter loading times, which in turn has a positive effect on the search engine ranking.

• Open source: the W3C has created SVG as a free standard, which means that you can use the award language without re­stric­tion, across multiple platforms and in com­bi­na­tion with other XML languages.

• Variety of animation options: SVG elements can also be animated in different ways. The W3C language SMIL (syn­chro­nized mul­ti­me­dia in­te­gra­tion language) can be used for this purpose, but the de­vel­op­ment of this language has now halted. In fact, Internet Explorer and Edge have never supported SMIL and it may not be im­ple­ment­ed in future versions of Chrome. It is more common to animate using JavaScript if you want to allow SVG elements to respond to events such as user clicks or mouse movements, for example. A third (more re­strict­ed) option is to use the CSS prop­er­ties, ‘animation’ and ‘motion path’, although these are also not supported fully by web browsers.

• SVG files can be formatted with CSS: graphics in SVG format can be ma­nip­u­lat­ed with the CSS stylesheet language. This allows all pre­sen­ta­tion at­trib­ut­es (i.e. colors, filters, font, font size) to be displayed in a separate CSS file or straight into the SVG in order to change the ap­pear­ance of the graphic.

• High com­pat­i­bil­i­ty: the functions of the different parsers vary, but this has very little effect on the rendering of the graphics since the SVG format is both downward and upward com­pat­i­ble. As a result, browsers display images according to their own settings and ignore unknown XML elements without having any serious impact on the display.

• Barrier-free: SVG graphics are text-based and therefore machine-readable by screen readers and all devices that can un­der­stand and playback source code.

• Visible in source text: if the SVG graphic is in the HTML document, you can easily adjust it in the program editor and change options such as the font color or size without any detours.

The above­men­tioned benefits make embedding the SVG format in­dis­pens­able for web­mas­ters. The many com­pli­ca­tions related to the different browser settings are now a thing of the past. The graphics format offers ad­van­tages in usability, SEO, ac­ces­si­bil­i­ty, etc. But is it too good to be true? The SVG format does come with its fair share of problems.                                                                                                                                                                   One crucial dis­ad­van­tage as­so­ci­at­ed with vector graphics is the limited range of programs. While you can choose from the usual image pro­cess­ing tools, you will need specific tools such as Adobe Il­lus­tra­tor or Inkscape in order to create, save, and convert SVG files. Con­se­quent­ly, getting to grips with SVG graphics can prove complex and time-intensive. Fur­ther­more, the graphic language has been crit­i­cized for the following reasons:

• High demand on the client’s resources: HTML5 elim­i­nat­ed the problem of having to download plugins but moved the rendering process to the browser level. Un­bur­den­ing the server and small file sizes may result in shorter loading times, but this supposed advantage also comes with problems. If the user’s computer doesn’t have the required pro­cess­ing power, complex vector graphics in the SVG format could lead to a delay in dis­play­ing the page. You can address this issue by removing un­nec­es­sary items to optimize the SVG code.

• Limited ap­pli­ca­tion pos­si­bil­i­ties: with its un­der­ly­ing tech­nol­o­gy, SVG is now the measure of all things when it comes to designing and scaling simple graphics and logos. By contrast, more complex images that can be edited ret­ro­spec­tive­ly can only be created with the help of a com­pli­cat­ed structure with clearly separated surfaces. The SVG format is unable to produce pho­to­re­al­is­tic graphics due to the limited range of details (depths, shading, light effects, etc.).

Using vector graphics in SVG format on a website means that you are forced to take painstak­ing measure to create or reproduce complex graphics or refrain from using them al­to­geth­er. It’s therefore advisable to only use vector graphics if you require the format’s strengths. If you want to display complex graphics, images, and photos, you should continue to use the well-known raster graphics formats.

SVG content is marked up in XML, meaning it bears the same struc­tur­al and syn­tac­ti­cal char­ac­ter­is­tics of any other XML document; es­sen­tial­ly, the code is hi­er­ar­chi­cal, con­tain­ing elements and at­trib­ut­es. An element is iden­ti­fied by a pair of tags, which always start with (<tag name>) and end with (</ tag name>). At­trib­ut­es contain ad­di­tion­al in­for­ma­tion about elements and are available as keyword pairs within a start or empty element tag (<tag name attribute name=’attribute value’>). It is also possible to insert in­struc­tions and comments. Each SVG XML document must contain exactly one element at the top level (<svg>), below which, any number of ad­di­tion­al elements can be nested. The document type de­f­i­n­i­tion and XML de­c­la­ra­tion can also be used to define the type, version, and character encoding of the un­der­ly­ing document among other things.

It is no longer necessary to download ad­di­tion­al plugins in order to embed this kind of graphic into a web project in SVG format. Instead, you can simply integrate the vector graphics directly into the HTML document, where you then have several options:

The HTML element, img, is the absolute standard for embedding graphic files into a website. As a stand­alone element, it has no element content and no end tag. Fur­ther­more, there is no need for the closing slash (/) in HTML. This method of embedding provides the most common form of syntax, which is why WordPress au­to­mat­i­cal­ly applies it to SVG graphics. If the img tag is marked up with a CSS statement to create a re­spon­sive design, the vector graphics au­to­mat­i­cal­ly adapt to the different display sizes with no further settings required. However, this im­ple­men­ta­tion method does not allow you to link the SVG graphic to a URL or a JavaScript ap­pli­ca­tion. Therefore, the code line to integrate SVG with the image tag looks something like this:

It’s possible to embed content into your web project using the object tag. This tag allows users to integrate a wide range of elements, including Java applets, Flash movies, Excel charts, as well as graphics in SVG format. Unlike the image element, this method makes it possible to integrate a fallback solution. This can be in the form of text or a pixel graphic, which is then displayed to the visitor of your website if the browser fails to load the SVG file. You can also link forms in the source code of the graphics file and create an­i­ma­tions with JavaScript. However, the object method is rarely supported by the most common content man­age­ment systems, which can sometimes make it somewhat cum­ber­some to use. The code for in­te­grat­ing SVGs with the object tag with fallback graphics is as follows:

Inline frames, better known as iFrames, have been in use since HTML4 and are now supported by all browsers. Web­mas­ters use these elements primarily to embed external content from other websites such as YouTube or Google Maps. However, it’s also possible to display files in the SVG format with the iframe element on your website. As with object elements, iFrames allow the vector graphics to be linked to JavaScript and URLs, as well as provide the de­f­i­n­i­tion of an alternate image or text if the SVG graphic fails to load. They are also ap­plic­a­ble across all domains. Even when the most common content man­age­ment systems support the tech­nol­o­gy, the user is burdened with a lengthy process when it comes to creating a re­spon­sive inline frame. The following example shows the general structure of an SVG iFrame that displays an al­ter­na­tive PNG graphic if a com­pat­i­bil­i­ty problem arises:

It is possible to embed an SVG graphic as a back­ground image using CSS in the same way as one might with a pixel graphic. In doing this, you can benefit from the SVG format’s lossless scal­a­bil­i­ty; an SVG back­ground au­to­mat­i­cal­ly adjusts to the viewport (i.e. the available display area of the device in use) without a decrease in quality. If you want to use a vector graphic as a back­ground image, simply create a cor­re­spond­ing div container like so:

Instead of using HTML elements that refer to the SVG file’s external location, you can integrate a graphic directly into the HTML code. For this, you also need the HTML element <svg>, which is reserved for SVG graphics. This ‘inline’ SVG elim­i­nates the need to load external files, while you still benefit from the ad­van­tages of CSS and JavaScript, such as their adapt­abil­i­ty. You can also provide the embedded graphics with links. However, the method does have one sig­nif­i­cant dis­ad­van­tage compared to embedding external files: If you want to embed very complex SVGs, the ad­di­tion­al lines of code means that your HTML document requires clarity. Of course, it’s possible to try and shorten the code as much as possible, but you should use a variant with an external SVG file for very elaborate graphics. This technique is also less suitable for graphics that occur more than once within a single page.

In the following extract we provide an example of a small SVG variant for embedding the flag of Italy into an HTML framework:

For many years, the SVG format was con­sid­ered an elegant and effective al­ter­na­tive to the pixel graphic formats such as PNG, JPEG, and GIF, which were more widely used in web de­vel­op­ment. Despite this, the format was as­so­ci­at­ed with a con­sid­er­able amount of extra work. This was primarily because some of the most popular browsers – most notably, Microsoft’s Internet Explorer – did not support the SVG format. However, in most cases today, an SVG file can be in­te­grat­ed as easily as any other image file. For many visual elements of a web project, vector graphics are an excellent choice; they can provide, among other things, re­spon­sive and barrier-free icons, buttons, logos, and fonts that can be easily adapted at any time.

The im­ple­men­ta­tion of the SVG format can be mastered even by beginners in web de­vel­op­ment, thanks to the numerous vari­a­tions of embedding and content man­age­ment system functions. However, the design of the vector forms does require a good deal of prior knowledge. Not only are the right tools required, but you also need to have ex­pe­ri­ence with vectors to get the most out of the lossless scaling graphics. But with some de­ter­mi­na­tion, it won’t be long before you can start to reap the benefits of the award-winning scripting language.