Friday, May 26, 2017

How to convert SVG images (in html format) to PNG

Sometimes SVGs are displayed on a webpage in html format, for example:

  <svg xmlns="http://www.w3.org/2000/svg" class="logo--white pts">
            <polygon points="18.523,1.054 18.518,0.265 0.719,0.265 0.719,1.93 15.282,1.93 0,20.07 0,20.735 18.626,20.735
            18.626,19.07 3.248,19.07"/>
<path d="M36.263,0.118l-9.709,20.617h2.081l3.269-6.956h9.838l3.269,6.956h2.081L37.383,0.118H36.263z
             M40.963,12.114h-8.281l4.126-8.833L40.963,12.114z"/>
   </svg>

How to save such images?
1. Go to http://nytimes.github.io/svg-crowbar/
2. Drag the "SVG Crowbar 2" to your bookmark bar. Ensure u see the indicator (that your resultant drag will be dropped into a slot on the bookmark bar) before you release your mouse button.
3. Go to the webpage with the svg u intend to save.
4. Click the "SVG Crowbar 2" button on your bookmark bar.
5. Depending on how many SVGs there are on the webpage, you will see that many options appearing onscreen, asking you which SVG you want to save. Just go to your desired option, then click on the white rectangle button to save that SVG.
6. Use GIMP to open the SVG file. It will ask you for the dimensions you wish to import to. Rightclick on the SVG at the webpage to check the dimensions, then key into GIMP accordingly.
7. While still in GIMP, export the svg to png.

No comments:

Post a Comment

Popular Posts