10 votes

A quick method for saving an SVG as a PNG

Posted by tomf
Tags: tips, inspector, svg

When I need an avatar, I use boringavatars.com -- but instead of using the site, I use this url with a generator I made in Google Sheets.

The trouble is, it spits out an SVG. To quickly save it, right click on the SVG > Inspect > right click <rect width=... and select 'capture node screenshot'

There are extensions that do this or something similar, but unless you're exporting SVGs in bulk, they're largely unnecessary.

5 comments

  1. [3]
    bltzkrg22
    Link
    If you have Image Magick installed on your PC, I whipped up a quick powershell script for you. https://hastebin.com/exudamavih.php (disregard .php, no idea why hastebin would create such a link)...

    If you have Image Magick installed on your PC, I whipped up a quick powershell script for you.

    https://hastebin.com/exudamavih.php (disregard .php, no idea why hastebin would create such a link)

    It probably works. It creates a new .png file with random filename in your current working directory. -Variant is mandatory, -Size defaults to 600, and the rest should be self-explanatory I guess. Example usage:

    https://i.imgur.com/vV6f2w8.png

    3 votes
    1. [2]
      tomf
      Link Parent
      oh nice. I'm on macos. I think I can install libsvg with it. Your powershell looks a lot better than mine. I should get into ricing it, even though I rarely use it :)

      oh nice. I'm on macos. I think I can install libsvg with it.

      Your powershell looks a lot better than mine. I should get into ricing it, even though I rarely use it :)

      2 votes
      1. [2]
        Comment deleted by author
        Link Parent
        1. tomf
          Link Parent
          for me, I couldn't get it working. The flag --with-librsvg is invalid. There's some discussion on github, but no real solution, so far as I could see.

          for me, I couldn't get it working. The flag --with-librsvg is invalid. There's some discussion on github, but no real solution, so far as I could see.

          1 vote
  2. Apos
    Link
    I've been using Figma to convert or edit SVGs.

    I've been using Figma to convert or edit SVGs.

    2 votes