What is the difference HTML and SVG is a question we often get asked from people trying our PDF to HTML5/SVG converter. So here is a brief article to answer that question 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 (Hyper Text 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 a 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 who release 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).
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 (click here to open the actual HTML code in a browser window). 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 pixellation at any resolution.
Because SVG is used to build a page when displayed, more complicated pages can take longer to render. My colleague Leon produced a very interesting youtube video for our September release which shows how he managed to improve the speed of our SVG by making changes (and how you can ‘time’ your SVG pages).
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 (click here to open the actual SVG code in a browser window). The SVG is text but can include links to images and other pages.
Some more examples of HTML and SVG
We have some sample HTML and SVG files created from our PDF converter here.
There is a very popular library called D3.js that has been used for some amazing things.
You can find an impressive example of animated SVG here (click and drag the nodes).
Conclusions – our take on HTML and SVG….
Our experience of HTML5 and SVG from developing our PDF converter has been that both have their strengths and weaknesses.
SVG is superior if you want a static display of vector content.
If you want to write animation, HTML5 has a canvas mode.
In practice, the fact that SVG is part of HTML5 means that you can use them together and this is the choice we have adopted for our PDF converter.
Are you using HTML or SVG?