How to Use SVG on a Mac and on the Web

ThatPainter is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More

The simplest answer: open an SVG in Safari, Chrome, or Firefox when you only need to view it; use a text editor for a controlled source edit; and use a vector editor when you need to move, redraw, or substantially change artwork. On a website, use <img> for most static graphics, inline <svg> when CSS or JavaScript must reach the artwork, and CSS backgrounds for decoration.

What SVG is—and what it is not

SVG, or Scalable Vector Graphics, is an XML-based image format. Instead of describing a picture as a fixed grid of pixels, it describes shapes, paths, colors, text, and effects using coordinates and mathematical instructions. That makes SVG particularly useful for logos, icons, diagrams, maps, interface graphics, and many illustrations.

#	Preview	Product	Price
1		Wacom Intuos Small, Wired Graphic Drawing Tablet with Pen + Software	$39.95	Buy on Amazon
2		UGEE M708 Drawing Tablet, 10x6 inch Large Space for Digital Drawing	$41.95	Buy on Amazon
3		XPPen Deco 01 V3 10x6 Drawing Tablet, 16K Battery-Free Stylus, 8 Keys	$45.00	Buy on Amazon
4		HUION Inspiroy H1060P Graphics Drawing Tablet, 10 x 6.25 in, 12+16 Hot Keys	$43.99	Buy on Amazon
5		HUION Inspiroy H640P 6x4 inch Drawing Tablet 8192 Pen Pressure	$27.99	Buy on Amazon

SVG is not automatically better than a raster format. Photographs generally belong in JPEG, WebP, or AVIF. A complex illustration with thousands of path points, filters, masks, or embedded photographs can produce a very large SVG. Text, fonts, filters, and application-specific effects can also behave differently across programs and browsers.

Because an SVG is text-based, you can inspect it in a code editor and sometimes edit it directly. That does not mean every path is human-readable: exported Bézier paths can be difficult to understand without a visual editor.

#1 Best Overall

Wacom Intuos Small, Wired Graphic Drawing Tablet with Pen + Software

• Wacom Intuos Small Graphics Drawing Tablet: Enjoy industry leading tablet performance in superior control and precision with Wacom's EMR, battery free technology that feels like pen on paper
• Works With All Software: Wacom Intuos tablet can be used in any software program to explore new facets of digital creativity; draw, paint, edit photos/videos, create designs, and mark up documents
• What the Professionals Use: Wacom's industry leading pen technology and pen to paper feeling makes it the preferred drawing tablet of professional graphic designers
• Software and Training Included: Only Wacom gives you software with every purchase. Register your Intuos tablet and gain access to some of the best creative software and Wacom's online training
• Wacom is the Global Leader in Drawing Tablet and Displays: For over 40 years in pen display and tablet market, you can trust that Wacom to help you bring your vision, ideas and creativity to life

$39.95

Buy on Amazon

Modern browsers broadly support SVG as a standalone document and through HTML, CSS, <img>, <object>, <iframe>, and script-generated graphics. See MDN’s SVG introduction and its guide to SVG as an image.

Open and preview an SVG on a Mac

1. Locate the file ending in .svg in Finder.
2. Double-click it. macOS may open it in a browser or another associated application.
3. For a different program, Control-click the file, choose Open With, and select Safari, Chrome, Firefox, a vector editor, or a text editor.
4. To permanently change the default application, choose Get Info, open Open with, select an application, and click Change All.

For viewing, a browser is usually the least complicated choice. For visual editing, choose a vector editor. For inspecting markup or changing a color, label, dimension, or accessibility element, use a plain-text or code editor.

You can also preview an SVG by dragging it into a browser window or using the browser’s File > Open File command. Finder thumbnails, Quick Look, and Preview can vary with the macOS release and the contents of the file, so do not treat them as a universal SVG compatibility test.

Make a quick test SVG

Save the following as test.svg in a plain-text editor, then open it in a browser:

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 300 200"
     role="img"
     aria-labelledby="title desc">
  <title id="title">Simple SVG test</title>
  <desc id="desc">A green circle on a red background.</desc>

  <rect width="300" height="200" fill="#d22"/>
  <circle cx="150" cy="100" r="70" fill="#198754"/>
</svg>

The xmlns attribute identifies the SVG namespace in a standalone file. The viewBox defines the internal coordinate system. The rectangle and circle are shapes, and fill sets their colors. The title and desc provide an accessible name and description.

Edit SVG on a Mac: choose the tool by the job

Text or code editing

This is appropriate for changing a known value, such as fill="#198754", editing visible labels, adjusting width, height, or viewBox, removing metadata, or adding <title> and <desc>.

• Use a plain-text or code editor, not a rich-text editor that inserts formatting.
• Keep a backup before editing.
• Save as plain text with the .svg extension.
• Reopen the result in a browser after each significant change.

Visual vector editing

Use a vector editor to move objects, edit Bézier paths, change fills and strokes, combine shapes, convert text to outlines, or export several assets. Illustrator, Sketch, Figma, Inkscape, Affinity Designer, and Boxy SVG can all be candidates, but SVG import and export are not identical between applications.

Rank #2

UGEE M708 Drawing Tablet, 10x6 inch Large Space for Digital Drawing

• Large Active Drawing Space: UGEE M708 V3 graphic drawing tablet features 10 x 6 inch large active drawing space with papery texture surface, provides enormous and smooth drawing for your digital artwork creation, offers no-lag sketch and painting experience
• 16384 Passive Stylus Technology: A more affordable passive stylus technology offers 16384 levels of pressure sensitivity allows you to draw accurate lines of any weight and opacity according to the pressure you apply to the pen, sharper line with light pressure and thick line with hard pressure for artistry design or unique brush effect for photo retouching
• Compatible with Multiple System and Softwares: Powerful compatibility, tablet for drawing computer, perform well with Windows 11/10/8/7, Mac OS X 10.10 or later, Android 10.0 or later, mac OS 10.12 or later, Chrome OS 88 or later and Linux; Driver program works with creative software such as Photoshop, Illustrator, Macromedia Flash, Comic Studio, SAI, Infinite Stratos, 3D MAX, Autodesk MAYA, Pixologic ZBrush and more
• Ergonomically Designed Shortcuts: 8 customizable express keys on the side for short cuts like eraser, zoom in and out, scrolling and undo, provide a lot more for convenience and helps to improve the productivity and efficiency when creating with the drawing tablet
• Easy Connectivity for Beginners: The UGEE M708 V3 offers USB to USB-C connectivity, plus adapters for USB C, ensuring easy connection to various devices and allowing beginner artists to set up quickly and focus on their creativity without compatibility concerns; Whether using a laptop, desktop, chromebook, or tablet, the UGEE M708 V3 provides a seamless experience for those just starting their digital art journey

$41.95

Buy on Amazon

Keep the original design document—such as an Illustrator, Figma, Sketch, or Affinity file—and treat the SVG as an export. Adobe’s SVG export guidance specifically recommends returning to the original Illustrator document for continued editing rather than treating an exported SVG as the master file.

Browser-based editing

Browser tools are convenient for collaboration, cross-platform work, interface design, and prototyping. They are a weaker choice for sensitive material that should not be uploaded, or for files containing unusual filters, complex paths, or application-specific metadata.

Save an SVG from a website

First open the SVG asset itself, not just the webpage containing it. Then Control-click or right-click the image or link and choose the browser’s save command, such as Save Image As or Save Link As. Keep the .svg extension. Safari’s available save commands are documented by Apple’s Safari guide.

Saving the webpage instead can produce a Web Archive, HTML source, a screenshot, a shortcut, or a file containing only part of the original asset. Verify the download:

• The filename ends in .svg.
• Opening it in a text editor shows an XML declaration or an opening <svg element.
• It renders independently when opened in a browser.
• Renaming a PNG, JPG, or PDF to .svg has not converted it; actual conversion requires tracing, redrawing, or exporting from vector artwork.

Put SVG on a webpage

Use <img> for ordinary static graphics

<img
  src="/images/logo.svg"
  width="240"
  height="80"
  alt="Acme logo">

This is the best default for many logos, icons, and illustrations. It is simple, cacheable, easy to replace, and keeps the page markup smaller than inlining every asset. If the image is purely decorative, use an empty alternative text value: alt="".

Use inline SVG when the page must reach its internals

<svg class="icon" viewBox="0 0 24 24" role="img" aria-labelledby="icon-title">
  <title id="icon-title">Search</title>
  <circle cx="10.5" cy="10.5" r="6.5"></circle>
  <path d="m16 16 5 5"></path>
</svg>

Inline SVG lets CSS target individual shapes and lets JavaScript manipulate the SVG’s elements. It can inherit the surrounding text color through currentColor. The costs are larger HTML, more DOM complexity, less independent caching, and greater responsibility for sanitization and maintainability.

The outermost <svg> establishes a viewport and coordinate system. xmlns is required in a standalone SVG document but is generally unnecessary for inline SVG serialized as HTML. See MDN’s <svg> reference.

Rank #3

Sale

XPPen Deco 01 V3 10x6 Drawing Tablet, 16K Battery-Free Stylus, 8 Keys

• Word-first 16K Pressure Levels: The upgraded stylus features 16,384 levels of pressure sensitivity and supports up to 60 degrees of tilt, delivering smoother lines and shading for a natural drawing experience. With no battery or charging needed, it operates like a real pen, making it easy for beginners to create effortlessly. This functionality helps novice artists develop their skills and explore their creativity without the intimidation of complex tools
• Designed for Beginners: This drawing pad desinged with 8 customizable shortcuts for both right and left-hand users, express keys create a highly ergonomic and convenient work platform
• Perfectly Adapted for Android: The XPPen Deco 01 V3 art tablet supports connections with Android devices running version 10.0 and above. It is recommended to download the XPPen Tools Android application, which adapts to your smartphone's screen aspect ratio, ensuring accurate mapping. It also supports mapping on Android screens with different aspect ratios in portrait mode
• Large Drawing Space, Bigger Bold Inspiration: This expansive drawing pad has10 x 6.25-inch helps you break through the limit between shortcut keys and drawing area
• Easy Connectivity for Beginners: The Deco 01 V3 offers USB-C to USB-C connectivity, plus adapters for USB C. This ensures easy connection to various devices, allowing beginner artists to set up quickly and focus on their creativity without compatibility concerns. Whether using a laptop, tablet, or desktop, the Deco 01 V3 provides a seamless experience, making it an ideal choice for those just starting their digital art journey

$45.00

Buy on Amazon

Use CSS backgrounds for decoration

.hero {
  background-image: url("/images/hero.svg");
  background-size: cover;
  background-position: center;
}

Background SVGs are useful for decorative patterns and hero artwork. They are not a replacement for meaningful alternative text.

Use <object> or <iframe> selectively

<object data="/images/diagram.svg" type="image/svg+xml"
        aria-label="System architecture diagram"></object>

<iframe src="/images/interactive-map.svg"
        title="Interactive map"></iframe>

These methods are useful when the SVG should remain a separate document or needs document-like behavior. They are usually excessive for a static icon or logo.

Make SVG responsive with viewBox

<svg viewBox="0 0 100 100"
     width="200"
     height="200"
     preserveAspectRatio="xMidYMid meet">
  ...
</svg>

viewBox="min-x min-y width height" defines the artwork’s internal coordinate system. width and height define the rendered size. A usable viewBox usually makes an SVG easier to scale while retaining its aspect ratio.

A missing or incorrect viewBox commonly causes clipping, excessive whitespace, or an apparently invisible drawing. preserveAspectRatio controls how the internal drawing fits the viewport; xMidYMid meet centers it without cropping.

svg.responsive {
  display: block;
  width: 100%;
  height: auto;
}

height: auto works best when the SVG has a usable intrinsic aspect ratio or a correct viewBox. Hard-coded dimensions are not automatically wrong: they are often useful for icons and logos that need predictable layout dimensions.

Style and manipulate SVG with CSS and JavaScript

.icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.icon .outline {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

For CSS to select individual paths, the SVG normally needs to be inline. Exported inline styles or presentation attributes may require a more specific selector before your stylesheet can override them.

const icon = document.querySelector(".icon");
icon.classList.toggle("is-active");

JavaScript can directly manipulate an inline SVG, or an SVG loaded in a context that exposes its document. An SVG used through <img> is not generally available for direct internal DOM manipulation from the surrounding page.

Rank #4

Sale

HUION Inspiroy H1060P Graphics Drawing Tablet, 10 x 6.25 in, 12+16 Hot Keys

• Working Area Configuration - HUION art tablet equips with a 10 x 6.25 inches working area, providing the user with the most comfortable size to work; the 10mm slim structure and minimalist design of appearance make the drawing tablet more attractive.
• Tilt Function Battery-free Stylus: This computer graphics tablet come with a battery-free stylus PW100, no need to charge, allowing for constant uninterrupted drawing. ±60° tilt support enables imitation of lines input with diverse drawing gestures, with accuracy ensured.
• Press Keys:12 programmable press keys plus 16 programmable soft keys, you can set shortcut keys on drawing tablet's driver based on your preferences, such as erase, zoom in/out, scroll up and down, and so on.
• Compatibility: HUION graphics tablet supports Windows 7 or later/ macOS 10.12 or later/ Android 6.0 or later/ Linux (Ubuntu). A USB adapter is required to connect to a Mac computer. H1060P supports various mainstream design and drawing software, including PS, SAI, AI, CDR, etc. (Please note: The H1060P is compatible with Ubuntu, but it requires the use of the Xorg display server. Wayland is not supported.)
• NOTE: You can easily connect your phone to the art tablet via the OTG connector; while iPhone and iPad are NOT at the moment. The cursor will not show up in the SAMSUNG Galaxy S series at present. If you are not sure whether the product is compatible with your Phone or any help, please contact us.

$43.99

Buy on Amazon

SVG is both an image format and a document format. In image contexts, browsers can restrict scripts and external resources; behavior differs when the same file is opened directly or embedded as a separate document. Do not assume an animation, external font, script, or linked image will work identically in every context. MDN documents these image-context restrictions.

Make SVG accessible

Meaningful graphics need a meaningful alternative. For inline SVG, use a title and, when needed, a description:

<svg role="img" aria-labelledby="title desc" viewBox="0 0 300 200">
  <title id="title">Quarterly sales trend</title>
  <desc id="desc">Sales rise steadily from January through June.</desc>
  ...
</svg>

• A company logo normally needs alternative text identifying the company.
• A decorative flourish should be hidden from assistive technology, for example with alt="" on an <img>.
• A chart or diagram needs a concise label and, where necessary, a longer explanation in surrounding HTML.
• Do not rely on visible text inside the artwork alone.

Serve and download SVG correctly

Your server should send SVG with:

Content-Type: image/svg+xml

Check the response headers with browser developer tools or:

curl -I https://example.com/images/logo.svg

A wrong MIME type can cause a browser to download the file, refuse to render it, or handle it unexpectedly. Also check that the response is genuinely the SVG rather than an error page returned with an .svg filename.

For a same-origin download link:

<a href="/images/icon.svg" download="icon.svg">
  Download SVG
</a>

The download attribute suggests a filename, but browser support, URL origin, redirects, and server headers affect the result. It generally works for same-origin URLs and blob: or data: URLs. For cross-origin files, the server’s Content-Disposition header may be more reliable. See MDN’s download-attribute reference.

Do not use .svgz casually. Gzip-compressed SVG has historically been unreliable in some browser/server combinations; use it only when you know the server and target browsers handle its delivery correctly.

SVG security: do not treat every SVG as a harmless image

Downloaded or user-uploaded SVG should be treated as potentially active document content. Be cautious with <script>, event-handler attributes such as onclick, external references, embedded resources, and links.

Best Value

Sale

HUION Inspiroy H640P 6x4 inch Drawing Tablet 8192 Pen Pressure

• Customize Your Workflow: The 6 customizable press keys on Huion H640P drawing tablet for pc let you assign your most-used commands—like undo, zoom, brush switch, or save—so you can keep your hands on the tablet and your mind on the art. Whether you're a digital painter switching brushes, or a comic artist zooming in and out, these keys keep your workflow smooth and uninterrupted. Plus, the Huion driver lets you save different shortcut profiles for different apps, so you never have to reconfigure when switching software.
• Professional Pen Performance: Huion H640P drawing pad for computer comes with the battery-free PW100 stylus that's always ready when inspiration strikes. With 8192 levels of pressure sensitivity, every light sketch, or bold stroke responds naturally to your hand—just like a real pen. The 5080 LPI resolution and 233 PPS report rate deliver lag-free, precise strokes, so you can draw confidently without second-guessing your cursor. The pen side buttons help you switch between pen and eraser instantly.
• Compact and Portable: Huion H640P computer graphics tablet features a compact, ultra-portable design at just 0.3 inches thin and 0.61 lbs light, so it slides easily into your backpack—perfect for sketching in coffee shops, taking notes in class, or editing on the go between home and studio. The 6x4 inch active area offers enough room for natural pen movements while fitting comfortably on crowded desks, or lecture hall seats.
• Stable Compatibility: Huion H640P graphic drawing tablet works seamlessly with Mac, Windows, Linux PCs, and Android smartphones/tablets (OS version 6.0 or later). Left-handed friendly, and you just need to flip the tablet and adjust the settings in the driver. Please note: H640P does NOT support iPhone/iPad.
• Move Beyond the Mouse: Huion Inspiroy H640P is a pen tablet that replaces your mouse for more natural, precise control. Freehand draw, take notes, or even play OSU—everything you do with a mouse, you can do better with a pen. The precise tip makes it ideal for detailed photo editing, graphic design, or signing PDF. Meanwhile, the ergonomic pen grip helps you avoid the strain that comes from hours of using a mouse.

$27.99

Buy on Amazon

• Sanitize SVG before allowing untrusted users to upload, publish, or share it.
• Do not insert untrusted SVG markup with innerHTML without sanitization.
• Prefer serving untrusted SVG as a static image with a policy appropriate to your application.
• Do not assume that renaming an SVG to .png changes its security properties; renaming does not convert the content.

The correct policy depends on your site architecture and threat model. Browser restrictions differ between image and document contexts, so test the exact way your application loads the file.

Troubleshoot common SVG problems

“The SVG is blank”

1. Open the file directly in a browser.
2. Inspect the source for a missing or incorrect viewBox.
3. Add a temporary background rectangle to reveal white artwork.
4. Check whether visible paths have fill="none" or white fills.
5. Open developer tools and inspect console and network errors for missing fonts, images, or CSS.
6. Re-export from the original design document if the artboard is empty or the markup is invalid.

“It is cropped or has too much whitespace”

The viewport and the drawing’s coordinate bounds probably do not match. Inspect viewBox, width, and height, and check whether artwork lies outside the declared coordinate system. Correcting the export in the original design application is usually safer than guessing at path coordinates.

“It looks different in Safari, Chrome, and my editor”

Likely causes include unsupported or partially supported filters, font substitution, application-specific metadata, CSS inheritance, blocked external resources, or features that the design application exported non-portably. For critical typography, convert text to outlines; avoid unnecessary filters and blend modes; inline required styles; and test the final file in the browsers that matter.

“The browser downloads it instead of displaying it”

Check Content-Type, Content-Disposition, redirects, and the file contents. The server may be returning an error page or deliberately marking the asset for download.

“The SVG file is huge”

Excessive path points, hidden objects, embedded raster images, repeated metadata, unused styles and definitions, filters, masks, and patterns can all increase size. Simplify paths, remove unused content, and optimize a copy rather than the original. Minification removes text overhead, but it does not necessarily simplify the drawing or remove embedded assets. Test the optimized file visually and semantically.

“CSS changes do not affect an external SVG”

Inline SVG is part of the page DOM, so page CSS can reach its internal elements. An external SVG used through <img> is isolated from the surrounding page’s selectors. Use inline SVG when individual shapes must inherit colors or respond to page state.

Which SVG tool should you use?

• Only viewing: Safari, Chrome, or Firefox.
• A tiny controlled change: a plain-text or code editor.
• Simple standalone Mac editing: Boxy SVG may suit users who want a focused SVG editor. Its U.S. Mac App Store listing showed $19.99 when observed August 16–18, 2026; pricing can change. See the Mac App Store listing.
• Browser collaboration and interface assets: Figma. Its U.S. pricing page showed a free Starter plan and displayed Professional seat prices of $16 per month for a full seat, $12 for a Dev seat, and $3 for a Collab seat when observed August 16–18, 2026. Recheck Figma’s current pricing.
• Native Mac design: Sketch. Its pricing page showed a $120 Mac-only license including one year of updates when observed August 16–18, 2026. Confirm current terms at Sketch’s pricing page.
• Professional vector illustration: Illustrator or a comparable professional editor, especially when the original source files already use that application. No current Illustrator price is stated here because the cited SVG tutorial does not establish one.
• Free/open-source experimentation: Inkscape is a strong candidate, but check its current official macOS download and compatibility information at inkscape.org.

Prices are country-, plan-, tax-, and date-dependent. More importantly, importing and exporting SVG does not guarantee preservation of every filter, font effect, animation, metadata field, or application-specific feature.

Quick Recap

Bestseller No. 1

Wacom Intuos Small, Wired Graphic Drawing Tablet with Pen + Software

$39.95

Bestseller No. 2

UGEE M708 Drawing Tablet, 10x6 inch Large Space for Digital Drawing

$41.95

SaleBestseller No. 3

XPPen Deco 01 V3 10x6 Drawing Tablet, 16K Battery-Free Stylus, 8 Keys

$45.00

SaleBestseller No. 4

HUION Inspiroy H1060P Graphics Drawing Tablet, 10 x 6.25 in, 12+16 Hot Keys

$43.99

SaleBestseller No. 5

HUION Inspiroy H640P 6x4 inch Drawing Tablet 8192 Pen Pressure

$27.99

A reliable Mac-to-web SVG workflow

1. Keep the native source document whenever possible.
2. Export an SVG from the vector editor.
3. Open the export directly in a browser, not only in the design application.
4. Check the viewBox, dimensions, whitespace, fonts, external assets, and critical effects.
5. Add appropriate alternative text, a title, or a longer description.
6. Optimize a copy if file size matters.
7. Choose the web method: <img> for most static graphics, inline SVG for CSS or JavaScript control, and a background for decoration.
8. Serve it as image/svg+xml.
9. Test the final page in the browsers and layouts your audience uses.
10. If offering a download, test the link, filename, origin, redirects, and server headers.

Sources and further reading

• MDN: Getting started with SVG
• MDN: SVG as an image
• MDN: <svg> element
• Apple: Save part or all of a webpage in Safari
• Adobe: Export SVG from Illustrator

ThatPainter Team

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.