Chuyển đến nội dung
JustVectorizeĐăng nhập
Vector hóa ảnh

What is an SVG file? How to open, edit, and use one

SVG explained in plain terms: what’s inside the file, why it stays sharp at any size, how to open and edit one, how to use it on a website, and how to make one from a picture.

4 phút đọc

Hiện bài viết này chỉ có bằng tiếng Anh.

SVG in one paragraph

SVG stands for Scalable Vector Graphics. It’s an image format that describes a picture as shapes — lines, curves, circles, and fills — instead of as a grid of pixels. It has been a W3C web standard since 2001, every modern browser displays it natively, and almost every design tool can open and export it. Because the shapes are redrawn at whatever size is needed, one small SVG looks sharp on a phone, a 5K monitor, and a trade-show banner alike.

What’s inside an SVG

An SVG is a text file — XML, to be exact — so you can open it in any text editor and read it. A minimal one looks like this:

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="60" r="44" fill="#fbbf77"/>
  <path d="M30 88 L60 38 L90 88 Z" fill="#514c6b"/>
</svg>
The file and what it draws. The viewBox sets up a 120 × 120 coordinate space; the circle and the path are drawn inside it, and the whole picture scales to any size.
  • viewBox defines the coordinate system — here 120 units wide and 120 tall. The picture stretches to fill whatever size it’s displayed at, keeping its proportions.
  • <circle>, <rect>, and <path> are shapes. A path’s d attribute is a list of drawing commands: M moves to a point, L draws a straight line, C draws a curve, and Z closes the shape.
  • fill and stroke set the colors, usually as hex values such as #fbbf77.
  • <g> groups shapes, which is how editors keep layers and color groups together.

A traced image is the same thing at a larger scale: hundreds or thousands of paths, one for each region of color.

Why designers and developers like it

  • Sharp at any size. Enlarging an SVG never blurs it, so one file covers a favicon and a billboard.
  • Small, for simple graphics. A logo or icon as SVG is often just a few kilobytes. (Very detailed artwork — a photo traced with many colors — can be larger than the PNG it came from.)
  • Editable. Every shape can be selected, recolored, moved, or deleted, and text in an SVG can stay real, selectable text.
  • Styleable. On a web page, CSS can change an SVG’s fills and strokes — an icon that changes color on hover, or a logo that switches for dark mode.

How to open an SVG

  • Any web browser. Drag the file into Chrome, Firefox, Safari, or Edge and it displays at once.
  • On a Mac, select the file in Finder and press the space bar for a Quick Look preview.
  • On Windows, File Explorer may not show SVG thumbnails; Microsoft’s free PowerToys adds SVG previews and thumbnails. Otherwise, open it in a browser.
  • Design software. Illustrator, Inkscape, Affinity Designer, and CorelDRAW open SVG files, and Figma imports them when you drag them onto the canvas.
  • Cutting software. Cricut Design Space and most laser programs import SVG directly.

How to edit an SVG

A vector editor lets you select individual shapes, change colors, move points, and delete what you don’t need. Inkscape is free and uses SVG as its native format; Illustrator and Affinity Designer open SVGs as editable artwork; Figma imports them as vector layers. For a quick change — swapping one color — you can even edit the hex value in a text editor.

Photo editors such as Photoshop and GIMP rasterize an SVG when they open it: they turn it into pixels at a size you choose. That’s fine for a one-off image, but the result is no longer a vector.

Using SVG on a website

  • As an image: <img src="logo.svg" alt="Company name" width="160" height="40">. The simplest option, and cached like any other image.
  • As a CSS background: background-image: url(logo.svg).
  • Inline: paste the SVG markup straight into the HTML. It adds no request, and CSS can restyle it — set fill: currentColor and an icon takes the color of the text around it.
  • Optimized: tools such as SVGO strip editor metadata and shorten numbers, often making a file noticeably smaller without changing how it looks.

One caution: an SVG can contain scripts, so some platforms restrict SVG uploads — WordPress, for example, doesn’t allow them by default. Use SVGs from sources you trust, and sanitize any that users upload.

When SVG isn’t the right choice

  • Photographs. A photo belongs in JPG, WEBP, or AVIF. Traced into SVG it becomes an illustration — and usually a large file.
  • Print shops and older workflows. Many ask for PDF or EPS instead: the same vector content in a different wrapper. The vector format guide explains which to send.
  • Email. Many email clients don’t display SVG reliably. Use a PNG in email signatures and newsletters.

How to make an SVG from a picture

You can’t turn a PNG or JPG into a real SVG by renaming it or choosing “save as SVG” — the pixels have to be traced into shapes. That’s what a vectorizer does: it finds the regions of color and draws each one as a path. Read PNG to SVG, and JPG to SVG for what’s involved, or upload an image and download it as an SVG.

Tất cả bài viết