Mark Stephens Mark Stephens has been working with Java and PDF since 1999 and has diversified into HTML5, SVG and JavaFX. He also enjoys speaking at conferences and has been a Speaker at user groups, Business of Software, Seybold and JavaOne conferences. He has a very dry sense of humor and an MA in Medieval History for which he has not yet found a practical use.

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

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

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

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?

If you’re a first-time reader, or simply want to be notified when we post new articles and updates, you can keep up to date by social media (TwitterFacebook and Google+) or the Blog RSS.

Mark Stephens Mark Stephens has been working with Java and PDF since 1999 and has diversified into HTML5, SVG and JavaFX. He also enjoys speaking at conferences and has been a Speaker at user groups, Business of Software, Seybold and JavaOne conferences. He has a very dry sense of humor and an MA in Medieval History for which he has not yet found a practical use.

Converting your PDF files to SVG with PDF2SVG

Last month we announced an updated product range for 2018. One of the changes is we have rebranded JPDF2HTML5 to BuildVu. This is because the...
Leon Atherton
1 min read

Converting your PDF files to HTML5 with BuildVu 

Recently we announced our updated product range for 2018 and are rebranding some existing products, like JPDF2HTML5 which has been renamed to BuildVu. It...
Georgia Ingham
3 min read

Favourite resources from our HTML development team

As the web progresses and grows, so do the technologies that come along with it. Trying to keep on top of everything you need...
Ovidijus Okinskas
1 min read

Leave a Reply

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