What is the difference between HTML and SVG?

What is the difference between HTML and SVG is a question we often get asked from people trying our free PDF to HTML5/SVG converter. So this article is here to answer and explain why you might choose HTML or SVG.

What is HTML?

This page you are reading is written in HTML… The HTML contains both the text and instructions on how to display the text, links to images, etc. I like to think of HTML as containing the page content, the structure of the page (HyperText Markup), and the style of the page (CSS).

HTML is the text-based language invented by Tim Berners-Lee at CERN to create web pages. It is displayed by Browsers (IE, Safari, Chrome, Firefox, etc).

You can write it from scratch in a text editor, but most people use tools to create it. There is now a huge range of dedicated tools to do this and many other applications (like the NetBeans IDE) also support it.

The HTML language is defined by an international committee that releases a public specification. We are currently on HTML Version 5 (HTML5). We find minor differences (which we often document on this blog) between support on each browser but no ‘major’ issues with HTML5 support in the major browsers.

HTML5 added some major enhancements to the HTML format including:-

A Canvas (for writing action games and animation).
Support for video and sound
Offline support
Location functionality
SVG support (so SVG is now part of HTML)
Improved CSS support (which can also be used for animations and transitions).

HTML also includes support for fillable forms and interactive elements. The pages can contain JavaScript code and be dynamically updated.

HTML5 is the first version of HTML which we feel is good enough to make a decent conversion from PDF possible. You can try yourself and see what you think with our free PDF online converter.

Here is what HTML looks like as a page and the raw HTML code. The HTML is text but can include links to images and other pages.

What is SVG?

SVG has been around since 1999 (the joke was that it was the technology of the future and always would be). However, all modern browsers now support SVG either directly or as part of the HTML5 specification so it is becoming increasingly common to use. It is based on XML and provided a text-based language to create shapes, text and embed images.

SVG stands for Scalable Vector Graphics (although it can also include text and bitmaps). This means that you define the content using simple text instructions and when it is scaled the browser will redraw it at the required resolution – so the Vector content is sharp with no pixelation at any resolution.

Because SVG is used to build a page when displayed, more complicated pages can take longer to render. If you are interested in improving SVG files, my colleague Leon wrote a blog post describing six ways of optimising SVG files.

You can embed forms and video in SVG as Foreign objects but in general, it lacks the wide range of features available in HTML5. It has arguably better drawing capabilities than HTML5 and when we compare the results of HTML5 and SVG from our converter side by side, the SVG generally looks ‘better’ (you can see 2 examples on this page to compare).

Here is what SVG looks like as a page and the raw SVG code. The SVG is text but can include links to images and other pages.