Best vector image format for Mac

What do you consider the best option for vector graphics on the Mac? I built a graphs library based on some basic fundamentals like drawing a symbol, line or hollow or filled rectangle. By reimplementing these methods I can generate pretty much any underlying format.

Currently, I’ve configured it to work with SVG as I’m using it to render graphs inline in some HTML output. The issue I have with that is the graphs are not easy to copy and paste out of the HTML into other packages.

The old PICT format is obviously a non-starter as it is long been on the list of unsupported items. I could convert all the HTML to PDF and still use the HTML viewer to show it in the application. Would that be better to isolate and copy and paste into other applications (for example Word or Pages)?

Alternative formats could be considered if I can get to a viewable format and offer copy and paste facilities that work better an SVG.

Another thought I had is is there some sort of wrapper element I could add to the HTML or SVG to “group” the items together into a more copyable package. Obviously they are already contained within an inline SVG tag, but that doesn’t seem to cut it.

Perhaps it is because I’m inlining the SVG. I’ve just tried a web site with an SVG file on it and I can seem to copy and paste that into Pages…

PDF is definitely the way to go. It is now the standard you are looking for on the Mac.

Thanks for that. I’ll set that as a long term goal as it would require me to not only configure the graphics system but also the other parts of the HTML output.

Interestingly, if I stick with SVG and place the graphs in an external svg file linked with tags the system seems to better treat them as a separate object. The only issue is that right clicking on it and selecting “Copy image” fails to copy anything at all. The clipboard remains unaltered.

For UIs, SVG is the way to go for ANY platform. PDF, as the acronym implies, is a format for printable content, mixing vectors and bitmaps. “Copy Image” seems expecting bitmaps, every pixel and size defined.

I’m moving all my icons to PDF.

1 Like

Not a blessed move. I can’t see Apple agreeing with such thing, if they do it, it’s a break in the standards.

Apple has been using PDF since the first version of OS X. Xojo converts my PDFs to 1x and 2x pictures.

1 Like

“PDF” stands for Portable Document Format. Perhaps you thought the P meant Printable?

And Beatrix just means that she is moving her original icon artwork over to PDF, which Xojo happily converts to a pixel format during the build process. OS X’s icons are all PNG format data; using PDF data as an icon was explored some 20 years ago as Apple was planning for the future of scalable user interfaces but abandoned as being too complex and slow. I’m not sure this capability ever made it into a release.

On iOS there are 3 different ways to use SVGs as symbols.

  • Use them as pixel images of a specific size (as if they had been converted to PNG)
  • Use them as vector data (“Preserve Vector Data” setting in asset catalogs)
    Starting from Xcode 12 you can use SVG files directly, but to use them as vector data on iOS 12 and BELOW, it seems that you have to first convert them to PDF (I think this way will die out).
  • Use them as custom symbols (custom SF Symbols)
    Requires iOS 13 and above.

Those things are converging. SVG is going towards an universal choice, and Custom SF Symbols an Apple only standard

PDF is a full featured Document format, not a simple Scalable Vector Graphics format.

That may be true, but the original poster was asking about the best way to represent vector data on the Mac. The Mac has deep, excellent OS-level support for manipulating and displaying PDF data - thus almost any application can paste it with high fidelity.

The SVG imaging model is strongly influenced by PDF’s capabilities, by the way. Many smaller use cases are easily represented by either format due to this overlap. Adobe heavily participated in the development of SVG and it shows.

https://developer.apple.com/documentation/uikit/uiimage/creating_custom_symbol_images_for_your_app

SVG is the “graphics language” used to manage your custom Apple SF Symbols.

Well, let’s see what will be the best vector image format for Macs in the following years.

1 Like

Apple is using SVG in this particular scenario because the format can contain context-sensitive rendering information, allowing a single graphic to look different in Dark Mode versus Light Mode in the user interface, for example.

This capability has little-to-no meaning in non-user interface situations.

Let me put it this way: PDF is not the way to go for read/write/update/present anywhere, no just macOS, it is a document format intended for a lossy (it does not intend to preserve editable content, it focus on how it looks on presentation so chars can be converted to curves and other losses like vectors fused or split) write-once/present scalable content. SVG is the de-facto vector lossless image format cross-platform. If you are satisfied using a read only intended document format focusing in presentation but not preserving data as a “vector image file” I see no problem. But until someone send me a current link of Apple Dev Docs saying to use PDF as its exchangeable “Vector Image Format” it is just a not sanctioned dev decision.

Rick,

What you are saying does not make sense to me…

PDF is a vector format , but it is one that also supports bitmaps as well…

Once a PDF or SVG is rendered , the rendered image of course is no longer a bitmap for either one.

-Karen

I understand. That’s a complex subject.

So opinions vary, but I’m at least using one of the two “recommended” options. To give a little more background to my need. Take the following output:

It is currently HTML with embedded SVG for the graphics. What I would like is for a user to be able to highlight some or all of the contents and copy and paste it into another application, for example Pages or Word. Currently the graphs come out badly.

Which is just wrong. If instead of inline SVG I use SVG files and img tags I can only copy the text contents. Which is a step in both directions. Good, in that the graphs don’t mess up. Bad, in that they don’t copy at all.

I can’t see you getting a way to select partial vector contents, as what you see rendered can’t be translated to its source that can be copied and pasted somewhere to “rerender” such graphics.
Vector images editors tracks “objects” and layers used to produce the final graphics, and they copy/paste such contents and properties, not the final rendered contents.

As the author of the graphics, you could “inject” some of those SVGs into the clipboard by some other way.

In windows, when I select and copy this circle in a vector editor, I see this in the clipboard:
image

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   version="1.1"
   id="svg238"
   xml:space="preserve"
   width="125.33953"
   height="118.84347"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg"><defs
     id="defs242" /><g
     id="g244"
     transform="matrix(3.7795276,0,0,3.7795276,-280.97197,-286.16882)"><ellipse
       style="fill:#00ff00;stroke:#000000;stroke-width:1.194"
       id="path184"
       cx="90.921875"
       cy="91.4375"
       rx="15.984375"
       ry="15.125" /></g></svg>

It isn’t rendered as such, it is HTML within an HTMLViewer. so the source is all available. I want the user to be able to copy all of the contents or just a graph, depending upon their needs. With the SVG in a file and accessed via an tag it is available as Copy Image… however it doesn’t actually copy the SVG file, or anything to the clipboard.