Mark Stephens Mark has been working with Java and PDF since 1999 and is a big NetBeans fan. He enjoys speaking at conferences. He has an MA in Medieval History and a passion for reading.

What is the difference HTML and SVG?

2 min read

What is the difference HTML and SVG is a question we often get asked from people trying our freePDF 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).

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.

Example HTML page

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

svg example

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.

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?

Did you know...

IDRsolutions offers a whole range of online file converters to convert PDF and Microsoft Excel, Word and Office Documents to HTML5, SVG or image formats?

It is free to use for single file conversions and also includes Developer links if you want to use our commercial software for bulk conversions. Find out more on this page

Mark Stephens Mark has been working with Java and PDF since 1999 and is a big NetBeans fan. He enjoys speaking at conferences. He has an MA in Medieval History and a passion for reading.

Enabling SVG Gzip Compression on Apache and NGINX

Gzip compression is a widely supported method of reducing the size of the content sent from a web server in order to improve the...
Leon Atherton
47 sec read

Leave a Reply

Your email address will not be published. Required fields are marked *

IDRsolutions Ltd 2020. All rights reserved.