1

Sometimes I need to make screenshots of a webpage or a text document (PDF, word, etc.) and I want to be able to zoom in after making the screenshot and still have a clear resolution. Since svg is scalable without resolution loss, it might be a solution. Is it possible to capture a screenshot as svg format? I'm running macOS High Sierra 10.13.6

1
  • 1
    You can't magically get more resolution/details into a screenshot than what is currently shown on the screen.
    – nohillside
    Nov 6 '20 at 13:04
3

The built-in utility used by macOS to take screen shots does not support the SVG file type. It supports raster graphics, even saved as a PDF it's an encapsulated raster graphic image in a PDF document wrapper.

As an example, using https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/mac.svg, here is what the contents of the file looks like:

<svg viewBox='0 0 90 100' xmlns='http://www.w3.org/2000/svg'>
  <path d='M62,0c2,10-9,24-20,24c-3-14,9-22,20-24M5,36c5-8,13-12,21-12c7,0,12,4,19,4c6,0,10-4,19-4c6,0,14,3,19,10c-16,4-15,35,3,39c-7,17-18,27-24,27c-7,0-8-5-17-5c-9,0-11,5-17,5c-7-1-13-7-17-13c-9-10-15-40-6-51' fill='#AAA'/>
</svg>

In Safari it appears as as:

enter image description here

In order to have it scalable, it needs to be in the code format shown above and viewed by an application that understands it, and can translate the code into an image for viewing, etc.

2
  • Yes, I understand that the built-in utility simply encodes the raw data (raster form) from windowserver (which has whatever resolution you choose for the display) and puts it into an image format. What I'm thinking about is that you can actually copy the text and render it into svg. I'm not sure if it's possible because I don't know how the application draws on the display but it would be great if I can do it.
    – Joy Jin
    Nov 7 '20 at 7:19
  • Because I can zoom in into those applications and the resolution is still high, I'm theorizing that the application renders things into vector first and then into raster, which would mean that taking a screenshot in svg is technically possible, but I'm probably wrong.
    – Joy Jin
    Nov 7 '20 at 7:25
1

In principle, anything in macOS that you can print, you can save as a PDF. Just use the PDF pull-down in the bottom-left of the print dialog.

These PDFs are actually vector based, so they are scalable like you describe. You could use one of the many tools to convert this PDF to SVG, but this is not guaranteed to work perfectly. PDFs don't translate 1 to 1 to SVGs, so there might be weird artifacts.

I don't know how you want to use these "screenshots", but you might consider just keeping them as PDFs (you can crop PDFs with the Preview app).

Anyway, to demonstrate, I used this method to create an SVG of your question: https://gist.github.com/OCJvanDijk/44391f6f286ca3a005527a733d279c3c

(I used https://cloudconvert.com/pdf-to-svg to convert, which was the first result on Google)

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .