logoredraws.com

How to Open an SVG File: Viewing, Editing and Checking Logo Artwork

How to open an SVG file on Mac, Windows or in a browser, choose a viewer or a vector editor, and check that the logo or favicon artwork is truly usable.

Published

Contents
  1. The short answer
  2. Choose the right tool for what you need to do
  3. How to open an SVG on a Mac
  4. How to open an SVG on Windows
  5. What you see when you open SVG as text
  6. Check that the file is usable logo artwork
  7. If the file will not open or looks wrong
  8. Gaps in this guide

The short answer

To view an SVG file, open it in any current web browser: drag the file into an open browser window, or right-click it and choose the browser from the Open With menu. To edit the shapes, open it in a vector editor such as Inkscape, Adobe Illustrator, Affinity Designer, or a design tool that imports SVG, such as Figma. To see how it is built, open it in a plain-text or code editor, because an SVG is a text file.

SVG stands for Scalable Vector Graphics. A vector graphic describes artwork as geometry: paths, points, curves and fills defined mathematically, not as a fixed grid of pixels. That is why a well-built SVG logo or favicon stays sharp at any size. The format is written in XML, a structured text markup, which is why the same file can be displayed by a browser, edited by a design program, and read as code.

Choose the right tool for what you need to do

  • Just look at the artwork: use a web browser, or a system preview feature such as Quick Look on a Mac.
  • Change shapes, colors or layout: use a vector editor that can open or import SVG.
  • Inspect structure, fix a small attribute, or prepare a favicon for a website: use a text or code editor.
  • Send the logo to someone who cannot open SVG: open it in a vector editor and export a copy in the format they need, keeping the original SVG as the master file.

How to open an SVG on a Mac

  • 1. Select the file in Finder and press the Space bar. Quick Look shows a preview without opening any program.
  • 2. For a full view, right-click (or Control-click) the file, choose Open With, and pick Safari or another installed browser. You can also drag the file onto an open browser window.
  • 3. To edit it, choose Open With and select your vector editor, or launch the editor and use its Open or Import command.
  • 4. To read the code, open the file in TextEdit set to plain text, or in any code editor.

How well the built-in preview handles SVG has varied between macOS versions, and no version-specific details were supplied for this guide. If a preview looks blank, distorted or missing parts, check the file in a browser before assuming it is damaged.

How to open an SVG on Windows

  • 1. Right-click the file, choose Open With, and select a browser such as Microsoft Edge, Chrome or Firefox.
  • 2. If no browser appears in the list, choose the option to select another app and point it to the browser you use.
  • 3. For editing, open the file from inside your vector editor.
  • 4. For the code, open it in Notepad or a code editor.

File Explorer may show a generic icon instead of a thumbnail for SVG files. That reflects how the system handles previews, not a problem with the file itself.

What you see when you open SVG as text

Opening the file in a text editor shows the instructions the browser follows to draw it. A simple logo mark might look like the example below. The values are illustrative only.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <path d="M4 4 H28 V28 H4 Z" fill="#1A1A1A"/>
  <circle cx="16" cy="16" r="6" fill="#FFFFFF"/>
</svg>

The viewBox sets the internal coordinate system the shapes are drawn in, so the artwork can scale to any display size. A path element holds a shape's geometry in its d attribute. Fill sets the color. For favicon work, a square viewBox and simple, bold shapes are design recommendations, not format requirements, because very small sizes hide fine detail.

Check that the file is usable logo artwork

A file ending in .svg is not proof that it contains clean, editable vector artwork, or that you may reuse the logo. Once the file opens, confirm the following.

  • Embedded images: look in the code for an image element or very long encoded data strings. These usually mean a raster picture, such as a PNG or JPEG, has been wrapped inside the SVG. It will not scale cleanly and cannot be edited as paths.
  • Live text: a text element depends on a font being available on the viewing device. If the font is missing, the lettering may display in a substitute typeface. For logo delivery, wordmarks are commonly converted to outlines (paths) so they render the same everywhere. Keep an editable version with live text separately.
  • Geometry: zoom in closely in a browser or editor. Edges should stay crisp. Blurry or stair-stepped edges point to raster content.
  • Editability: in a vector editor, select the elements and check whether they are separate paths you can adjust, or one locked or grouped object.
  • Scripts and external references: an SVG can contain script code or point to outside files. Be cautious with files from unknown sources. Inspecting the code in a text editor first is the safer way to see what a file contains.
  • Rights: being able to open and edit a logo does not grant permission to use it. Confirm usage rights with the owner or the source's license.

If the file will not open or looks wrong

  • Try a different browser first. If it renders there, the problem was the previous viewer, not the file.
  • Open the file in a text editor. If you see an svg tag and readable markup, the file is genuine SVG. If you see unreadable binary characters, the file may be another format that has been renamed, or it may be compressed. Compressed SVG usually uses the .svgz extension.
  • If parts are missing, look for references to external files or fonts that were not supplied with the SVG.
  • If an editor imports the file differently from how a browser shows it, compare the two. Editors do not all support every SVG feature in the same way.

Gaps in this guide

No source evidence was supplied about specific operating system versions, application versions or feature support. Where behavior depends on the version, as with built-in previews, test on the systems your audience actually uses before you finalize favicon or logo delivery.