93

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.

Kalle Richter
  • 2,472
  • 6
  • 44
  • 64
ktm5124
  • 2,037

17 Answers17

58

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

Miroslav Bajtoš
  • 716
51

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

Nolan Amy
  • 105
Billy Wang
  • 611
12

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. What has happened is you installed a text editor and it "took over" as the default app to open for those file types.

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_file.svg you can start by just putting file:// in your browser URL then navigate to it.

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
  • 2,394
10

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 --cask inkscape
John Vandenberg
  • 152
Dalek Control
  • 201
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

bright-star
  • 1,619
Laszlo
  • 150
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
  • 50,917
3

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
  • 1,102
2

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
  • 121
  • 3
2

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
  • 121
1

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

alexhamberg
  • 11
1

Quick no-install option:

  1. Preview it in finder with spacebar
  2. Maximize the window (top left)
  3. Take screenshot with cmd-shift-3 or similar
Paul
  • 111
1

Pressing spacebar is noted on the answers but I was interested to know how one can bring that from command line without the finder and turned out that be can done using

qlmanage -p filename.svg

But apparently it needs an interactive shell to work as I couldn't issue it from an app/script I wanted the functionality, to me it quickly turned out, my editor, IntelliJ Idea, was able to show SVGs itself so I'm using that anyway guess however someone will see find how one can bring qlmanage from a shell correctly also.

Ebrahim Byagowi
  • 436
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
  • 1
0

For new versions of Chrome, it can render SVG files directly(I just tried with Chrome 79).

prehistoricpenguin
  • 101
0

Gimp is free and worked for me. https://www.gimp.org/

user1821961
  • 109
0

Most internet browsers can view SVGs.

right click the svg -> open in safari, then it will open in a new tab.

Embedded_Mugs
  • 171
0

svg format is an XML format. So you do not need to convert it into html. You should be able to directly view it in a browser. You can confirm this by opening the file in a text editor and checking the encoding.

uzumas
  • 111