HTML and SVG Explained (Along with Use Cases)

In his article I will explain what is HTML and SVG, how they’re related and which might be suited for your use case.

What is HTML?

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

The HTML language is defined by an international committee that releases a public specification. We are currently on HTML Version 5 (HTML5). You will 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.

How does HTML work?

This page you are reading is written in HTML but how does html code work? HTML contains both the text and instructions on how to display the text, links to images, etc. You might be wondering how HTML is used, 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).

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.

HTML5 Features

HTML5 had some major additions to the HTML features 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.

If you’re working with PDFs and would like to convert it to HTML for your web applications, you can learn more our product BuildVu.

What is SVG?

SVG stands for Scalable Vector Graphics (although it can also include text and bitmaps). Such vector graphics do not lose their quality when zoomed or resized because they are scalable. 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.

SVG Support

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.

How does SVG work?

When 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. You can use BuildVu to convert your PDFs to SVG for display on your own web applications.

More examples of HTML and SVG

Visit our BuildVu page to see more sample HTML and SVG files created from our PDF converter.

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.

If you want to use JavaScript or Fillable forms HTML5 is the choice.

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?

BuildVu allows you to

View PDF files in a Web app

Convert PDF documents to HTML5

Parse PDF documents as HTML