How to Export Part of an HTML Page to an Svg Image

Can I export part of an HTML page to an SVG image?

I've come across the same need and found the following free utilities which hold promise that this is possible:

1. WebVector is an HTML to SVG or PNG convertor. It converts a HTML document into a vector image in SVG format or a bitmap image in PNG format. The Standard Vector Graphics (SVG) files can be further edited by a variety of vector graphics editors such as Inkscape.
   
   http://cssbox.sourceforge.net/webvector/

2. CutyCapt is a small cross-platform command-line utility to capture WebKit's rendering of a web page into a variety of vector and bitmap formats, including SVG, PDF, PS, PNG, JPEG, TIFF, GIF, and BMP. See IECapt for a similar tool based on Internet Explorer.
   
   http://cutycapt.sourceforge.net/

3. wkhtmltopdf and wkhtmltoimage are open source (LGPL) command line tools to render HTML into PDF and various image formats using the QT Webkit rendering engine. These run entirely "headless" and do not require a display or display service. There is also a C library, if you're into that kind of thing.
   
   http://wkhtmltopdf.org/

--

Unanswered Questions: I know that you can use something like rasterize.js to render DOM objects into <canvas>, but how are these libraries built such that they are able to export SVG? Specifically, can WebKit itself be used to output "pixel-perfect" editable SVG of web content and HTML snippets? Is this a relatively simple task for a library or is this something significantly more complex?

How to extract svg as file from web page

Unless I am misunderstanding you, this could be as easy as inspecting (F12) the icon on the page to reveal its .svg source file path, going to that path directly (Example), and then viewing the page source code with Control+u. Then just save that code.

To save the code, paste it into a text editor such as google docs. Then save the file as a .txt file. Change the end of that file's name from ".txt" to ".svg", and now you have your file as a .svg. This method does not involve getting any external extensions or downloading any programs, and it functions the same.

Referencing that Salesforce page specifically, you might want to note that their icons are freely available to download here: https://www.lightningdesignsystem.com/icons/ !

Convert HTML Page to SVG Image via PhantomJS

Here I found a tool which converting web pages into vector format screenshots: CutyCapt - it also rendering into other formats like png...

Have FUN! :)

Render HTML to an image

There is a lot of options and they all have their pro and cons.

Option 1: Use an API

• ApiFlash (based on chrome)
• EvoPDF (has an option for html)
• Grabzit
• HTML/CSS to Image API
• ...

Pros

• Execute Javascript
• Near perfect rendering
• Fast when caching options are correctly used
• Scale is handled by the APIs
• Precise timing, viewport, ...
• Most of the time they offer a free plan

Cons

• Not free if you plan to use them a lot

Option 2: Use one of the many available libraries

• dom-to-image
• wkhtmltoimage (included in the wkhtmltopdf tool)
• IMGKit (for ruby and based on wkhtmltoimage)
• imgkit (for python and based on wkhtmltoimage)
• python-webkit2png
• ...

Pros

• Conversion is quite fast most of the time

Cons

• Bad rendering
• Does not execute javascript
• No support for recent web features (FlexBox, Advanced Selectors, Webfonts, Box Sizing, Media Queries, ...)
• Sometimes not so easy to install
• Complicated to scale

Option 3: Use PhantomJs and maybe a wrapper library

• PhantomJs
• node-webshot (javascript wrapper library for PhantomJs)
• ...

Pros

• Execute Javascript
• Quite fast

Cons

• Bad rendering
• No support for recent web features (FlexBox, Advanced Selectors, Webfonts, Box Sizing, Media Queries, ...)
• Complicated to scale
• Not so easy to make it work if there is images to be loaded ...

Option 4: Use Chrome Headless and maybe a wrapper library

• Chrome Headless
• chrome-devtools-protocol
• Puppeteer (javascript wrapper library for Chrome headless)
• ...

Pros

• Execute Javascript
• Near perfect rendering

Cons

• Not so easy to have exactly the wanted result regarding:
  
  • page load timing
  • viewport dimensions
• Complicated to scale
• Quite slow and even slower if the html contains external links

Disclosure: I'm the founder of ApiFlash. I did my best to provide an honest and useful answer.

Export SVG tag as image from HTML webpage

In the svg tag insert this: xmlns="http://www.w3.org/2000/svg"

Like this:

<svg xmlns="http://www.w3.org/2000/svg" id="example-1" viewBox="0 0 12 12">

Save/ Grab svg from website to local machine or convert to image

You have access to the complete dom and the js objects provided by the browser ( eg. a xpath processor) as well as external libraries.

so all you need is a unique identification of the svg element in question.

start off importing jquery on the fly and selecting all svg elements on the page. this assumes that you have loaded the page you are investigating and have opened the console. the following statements should be entered at the command prompt:

var e = document.createElement('script');
e.setAttribute('type','text/javascript'); 
e.setAttribute('src','http://code.jquery.com/jquery-1.10.2.min.js'); 
(document.getElementsByTagName('head'))[0].appendChild(e);

$('svg');

the last command will provide you with a dom fragment containing the svg element.

the preceding vanilla javascript commands add a script element referencing the jquery library to the current web page. jquery simplifies the dom handling substantially, however, it is not necessary strictly speaking (see fr32c's answer).

if you're done, choose the 'reveal in elements panel' entry of the context menu of the console output just generated. you'll be redirected to the element inside a folding hierarchy representation of the page dom. choose 'copy as html' from the context menu of the svg element selected. save the clipboard data as a svg file.

Note

in chrome (29) and opera (12), jquery is imported in the console, which reduces the element query to $('svg') (thanks to Ir0nm for this information).

---

Related Topics