How to view an SVG image on Mac OSX?

46

6

I'm working with a bioinformatics visualization tool, which saves a biological pathway as an SVG image.

I now want to view the SVG image... but am having some trouble doing so. I tried opening it as a file in both Chrome and Firefox, but in both browsers it just opens a blank page. I clicked on "View page source" and I'm able to see the XML data of the SVG image, but still, I want to see the image itself as a graphic.

What's the easiest way to view the image as a graphic? I understand that I can embed it in an HTML page and view it that way... but that's not at all convenient, if I have to create an HTML page each time I save a pathway as an image.

By the way, I'm using a 64-bit Mac OSX version 10.8.4.

ktm5124

Posted 2014-10-31T19:27:01.793

Reputation: 1 397

6Browsers should be able to just show it. I wonder why that's not the case for you. Can you upload an example? – slhck – 2014-10-31T19:40:39.757

Yes I thought that Firefox or at least Chrome should be able to view it. Is there a way to upload on Superuser? Or would I have to upload on a temporary hosting site? – ktm5124 – 2014-10-31T19:58:30.183

No, sorry, but any file hosting site or Dropbox or something would be possible, of course. – slhck – 2014-10-31T20:00:11.813

1I was able to open a smaller SVG file in Chrome. Could it possibly be the image size? The SVG file I'm unable to open is 20 MB. – ktm5124 – 2014-10-31T20:16:39.833

1Have you tried opening it in Inkscape? – Darth Android – 2014-10-31T20:21:17.307

I just tried opening it in Inkscape. It opened... but it's very slow and unusable. It seems like Inkscape is on the verge of crashing :( After all it's a 20MB SVG file. – ktm5124 – 2014-10-31T20:38:15.760

Yeah, after opening it in Inkscape the software is completely frozen. I can't even use the menu tools (like the 'File' menu). – ktm5124 – 2014-10-31T20:39:05.737

20 MB is a lot for a vector image. – slhck – 2014-10-31T20:49:39.727

I don't have OS X so I'm not familiar with the options available, but on Linux I would just create a small ramfs, or ramdisk. When I want to view a file I'd copy it to the ramfs, then open it, when done, remove it from the ramfs. Perhaps OS X has an option similar to sudo mount -t ramfs -o size=40m ramfs /media/ramfs1 ? – Robin Hood – 2014-11-01T20:34:06.803

20 MB is really large. If the file size turns out to be the cause of the problem, you might have luck using SVGO, a command line tool that can drastically and losless shrink the SVG file. – Ideogram – 2018-09-02T14:05:39.040

Answers

35

I am pretty happy with Gapplin. It can convert (export) SVG images to other image formats (e.g. PNG) too.

Miroslav Bajtoš

Posted 2014-10-31T19:27:01.793

Reputation: 486

Not available in the UK apparently :( – JMK – 2018-11-26T08:21:53.103

@JMK Thats weird, its available in Ireland anyway. I was able to download it from the App Store. – Gary Barrett – 2019-03-20T23:16:12.817

7

A simple way is to use preview in Mac, simply press space key on the keyboard.

Billy Wang

Posted 2014-10-31T19:27:01.793

Reputation: 71

1But does Preview work with SVG files? – Glorfindel – 2018-09-23T18:15:45.303

2Mac spotlight (Command+SpaceBar) does preview for svg files. Although not the best solution. – jerrymouse – 2018-10-01T13:54:24.950

6

I needed a nearly-portable solution to view SVG files (vector export from Google Drawings, which doesn't print large images well) since my Mac is locked down to prevent typical software installation, App Store access and Chrome extensions. Fortunately, I can run Homebrew. That led me to install Inkscape from Homebrew using this command.

brew install caskformula/caskformula/inkscape

Dalek Control

Posted 2014-10-31T19:27:01.793

Reputation: 161

5

There is a nice new free SVG editor with you can get from the Mac App Store or the Chrome Web Store. Give it a try, it's free now $9.99 on the App Store.

Boxy SVG - the scalable vector graphics editor

enter image description here

Laszlo

Posted 2014-10-31T19:27:01.793

Reputation: 151

4

If you're part of the unlucky few where double clicking an .svg from Finder or opening it from the command line like open filename.svg just opens your svg file source in a text editor (and you wanted to see it visually), it appears possible to view them in a browser these days.

Navigate in your web browser to its location, ex: file:///Users/my_username/... full URL should have look like file:///Users/username/folder/folder/my_jstack.svg

This will "open it" visually in any major web browser. Alternatively right click on it in Finder and select "open with" and select a browser.

rogerdpack

Posted 2014-10-31T19:27:01.793

Reputation: 1 181

3

GraphicConverter has always been my standby 'any format' viewer & editor - it does SVG too
Caveat: Not free & there may be other apps that can do it.

Tetsujin

Posted 2014-10-31T19:27:01.793

Reputation: 22 456

I see. Yes we're looking for a free software (or browser function). – ktm5124 – 2014-10-31T19:57:05.963

Adobe used to make a viewer plugin... dumped summarily in 2009 http://www.adobe.com/devnet/svg/adobe-svg-viewer-download-area.html ... one reason Apple won't use Adobe formats natively, they drop support or change formats at any time.

– Tetsujin – 2014-10-31T20:01:51.873

1It might be time to be looking at a newer format, before you lose the ability to open/edit in future – Tetsujin – 2014-10-31T20:05:37.190

The software I use only lets you download the visualization in SVG format. – ktm5124 – 2014-10-31T20:39:38.630

1I'd be inclined to poke upwards towards management, about a historic format - not going to be good for archiving – Tetsujin – 2014-10-31T20:47:59.587

@Tetsujin SVG isn't a "historic" format, or an Adobe one. It's an open standard that's in very wide current use; if anything, support for it is increasing. – Marnen Laibow-Koser – 2017-01-07T03:35:12.137

GraphicConverter has a demo version (free), which handles this just fine.. – frank ankersly – 2018-01-11T16:47:15.480

2

I found that applications would refuse to open an SVG on OSX unless I gave it the correct extension. So I renamed the file to, in my case, pprof.svg. I was then able to "open with" Chrome.

Matt Joiner

Posted 2014-10-31T19:27:01.793

Reputation: 825

1

you can try this photo viewer to browse SVG images on Mac with ease.

alexhamberg

Posted 2014-10-31T19:27:01.793

Reputation: 11

Almost went with this option, turns out I had "icon preview off" in finder view options. That solved my problem of dealing with hundreds of SVGs in a folder – Ray Foss – 2019-03-28T13:42:47.423

1

I just discovered SVG Converter by Ohanaware on the Mac App Store. It converts to a number of formats and can crop before converting. Opening an SVG image gives you a nice window that shows the image and conversion is optional.

Paul Waldo

Posted 2014-10-31T19:27:01.793

Reputation: 111

@Scott it does give a preview. This is where the cropping can occur. – Paul Waldo – 2018-10-28T12:04:03.073

Thanks for responding  and  editing your answer. – Scott – 2018-10-28T16:36:18.157

0

On macOS 10.12, I have been working with SVG files drawn using Inkscape and my own hand-written SVG files composed in a text editor.

Initially the Inkscape files would open as images in a web browser, in Preview, and via Quick Look (spacebar in the Finder), but my hand-written files would not. Instead they were displayed as raw source XML.

It turned out that the critical difference between the two was that my hand-written files were missing xmlns:

<svg xmlns="http://www.w3.org/2000/svg" width=… …>
…
</svg>

Once I added a namespace declaration to <svg>, macOS recognised my hand-written files as SVG images and displayed them as such.

Perhaps your bioinformatics visualization tool has also omitted this declaration?

John Marshall

Posted 2014-10-31T19:27:01.793

Reputation: 101

0

I love the tool ImageMagick it is available from the apt repo for linix as well as a GitHub.

Edit: It is a simple command-line utility that utilizes the file extensions, or user flags to override to convert images, with the first file being converted (and copied ) into the second file in the argument list. Source: https://github.com/ImageMagick/ImageMagick

SheeplessKnight

Posted 2014-10-31T19:27:01.793

Reputation: 1

1Explaining how this tool answers the question would make it more helpful. Also, please read our Help section where there's an article explaining how best to recommend software. – music2myear – 2019-04-03T22:38:42.697

0

Quick no-install option:

  1. Preview it in finder with spacebar
  2. Maximize the window (top left)
  3. Take screenshot with cmd-shift-3 (wai

Paul

Posted 2014-10-31T19:27:01.793

Reputation: 101