.fw files.wiki
SVG

SVG Files

Scalable Vector Graphics

SVG is an XML-based W3C vector image format for scalable 2D graphics, icons, logos, diagrams, and web artwork.

Scalable Vector Graphics

Developer
World Wide Web Consortium (W3C)
Category
Vector Graphics
MIME type
image/svg+xml
Format
Text
First released
2001
Latest version
SVG 2 Candidate Recommendation Draft
Open standard
Yes

Open a .SVG file online

Reading file…

What is a .SVG file?

An svg file refers to Scalable Vector Graphics document. SVG refers to the XML-based graphical markup language used for the representation of two-dimensional vector images from the World Wide Web Consortium. The SVG was firstly published in 2001 by W3C, and today the format remains open. The SVG documents are usually plain text and contain a <svg> root element; however, some times before there may be a XML declaration or some comments preceding <svg>.

Such files hold various data, including shapes, lines and paths, text, colors including gradients, fill effects and patterns and masks as well as clip path or even embedded images of a non-vector origin and metadata or script elements for additional animation capabilities. Due to being not based on bitmaps but vectors (which enables mathematical scalability) SVG images can fit different scales without any loss of quality - starting from a low-sized icon with just several 16x16 pixels all through vector logos to a poster of any size. SVG images are used on web pages and websites (and even apps, in the webapps case), icon sets and logos, technical schemes, charts, maps and vector drawing files produced by Inkscape, Adobe Illustrator, Corel DRAW, etc. software.

The .svg format extension is not normally shared with something else than an SVG format. Standard compressed SVG uses .svgz.

How to open a .SVG file

Open a .SVG file on Windows

  1. 1 Go to the folder with your file in File Explorer. Usually, downloaded files end up in Downloads.
  2. 2 Double-click your .SVG file if you have an app for .svg files on your computer. In case it does not open, move on to step three.
  3. 3 Right-click your .SVG file -> select Open with -> Choose another app.
  4. 4 Choose Google Chrome in the list (Windows 11: choose Always). For Windows 10 -> put a check on "Always use this app to open .svg files" and click OK.

Still not opening? See common problems and fixes, or view it in your browser.

Programs for Windows

Open a .SVG file on macOS

  1. 1 In the Finder app, locate your .SVG file.
  2. 2 Just double-click your .SVG file in order to automatically launch the program which is connected with it.
  3. 3 Need another app on your Mac? Control-click the file (or right-click with a mouse). In the pop-up menu select Open With -> Google Chrome.
  4. 4 If it isn't in the list, choose Other… and find the application manually.

Still not opening? See common problems and fixes, or view it in your browser.

Programs for macOS

Open a .SVG file on Linux

  1. 1 Launch your file manager. Depending on the desktop it may be named Files (GNOME), Dolphin (KDE Plasma), Nemo (Cinnamon) or Thunar (Xfce).
  2. 2 Double-click the file.
  3. 3 Or choose another program by right-clicking the file -> Open With -> Google Chrome.
  4. 4 Install Google Chrome (if it is not installed on your computer) from the software centre, repository or Flathub.

Still not opening? See common problems and fixes, or view it in your browser.

Programs for Linux

Open a .SVG file on Android

  1. 1 Launch Files or another file management app.
  2. 2 In Downloads, find the .SVG file and open it by tapping.
  3. 3 A list of apps capable of opening the file will be shown. Tap Google Chrome and press Always to permanently connect the file type with this app.
  4. 4 No apps able to open this file? Download Google Chrome from the Google Play Store.

Still not opening? See common problems and fixes, or view it in your browser.

Programs for Android

Open a .SVG file on iPhone / iPad

  1. 1 Use the Files app and go to On My iPhone, iCloud Drive or Downloads.
  2. 2 Tap the .SVG file you want to open.
  3. 3 If the file can be opened by a built-in iOS app (supported format), it opens automatically.
  4. 4 Touch and hold the file to get the context menu -> choose Share -> select Google Chrome from the list of apps.
  5. 5 If there is no such option, download the app first from the App Store and then tap the document again.

Still not opening? See common problems and fixes, or view it in your browser.

Programs for iPhone / iPad

Open a .SVG file online

  1. 1 Move to the online viewer at the top of this page.
  2. 2 Drag the file there or select it, and its contents will appear in your browser tab. The file is not uploaded.

Still not opening? See common problems and fixes, or view it in your browser.

Programs for Online

More details about opening .SVG files

Browsers will allow you to open your SVG files both on computers and smartphones nowadays. The fastest software to use for a standard file should be Chrome, Firefox, Edge, and Safari because image/svg+xml can be opened in these programs in an original way, no additional applications required. Free applications that could open and manipulate SVGs on Windows operating system would include Inkscape, LibreOffice Draw, Boxy SVG. The commercial vector drawing software for the desktop would be Adobe Illustrator, CorelDRAW Graphics Suite, and Affinity Designer. The online version of the Figma can run on Windows also. The fastest viewer to work with SVG files on macOS operating system would be Safari because it can display SVG immediately. There is no necessity in installing special applications because browsers will help. If there is need of editing an SVG file, Adobe Illustrator, Inkscape, Boxy SVG, Affinity Designer, Sketch, Linearity Curve and Figma can provide all of the required actions to you. In the case with Linux, one will need Inkscape as a conventional software and vector graphic editor. The other programs to open SVGs could include GIMP (rasterizing program), ImageMagick to convert through the CLI or browser viewers. Android and iOS users could open most of their SVGs in Chrome, Firefox, Edge or Safari viewers but there will be some restriction for editing. Linearity Curve on iPadOS and iOS, plus web apps such as Figma where available, are the main practical editing choices.

To be sure that double click action is wrong, right click a file, choose browser/viewer/editor, which are available, and see the difference. One should make sure that his or her SVG file has the .svg extension. To be sure that one deals with an SVG file one should try to open it with the text editor to see the initial markup of the file containing tag <svg>. If there is need to print SVG files in any ways, open this file firstly with vector editing tool and check the fonts, colors and page settings in a file to proceed with the PDF conversion.

Technical details

SVG files are text XML files, not the preformatted container of some other format (fixed and binary). It means that a document may begin with an XML Declaration (<?xml version="1.0" encoding="UTF-8"?>), DOCTYPE definition (<!DOCTYPE svg>), an XML Comment or the opening <svg> tag. Due to that, a charset becomes important because parsing is executed using text. For example, a file may contain xml declation about utf16 rather than utf-8 charset which may result into the document parse failure.

Registered MIME type is image/svg+xml. Web servers have to supply this mime for the browser to interpret SVG files. Otherwise if they serve with text/plain or application/octet-stream, the document would be downloaded instead of being parsed (unless one manually specifies how the file should be served and interpreted). Files sizes are small (icons of 1-20 KBytes, detailed pictures may occupy up to some megabytes depending on details). The bigger files would be in case when there are some embedded raser images, font encoded in the document, some extra metadata.

Document tree structure will likely consist of the svg root, g groups, path, rect, circle, line, polyline, polygon, text, image elements. Coordinates use user units, viewBox, width, height, preserveAspectRatio, and transform attributes control visibility of the coordinate system. Styling might come in terms of presentation attributes, style attribute, styles inlined in <style> elements of a file or external css link. Also, it is important that there is variable compatibility across browser/editors/importing tools.

There may be metadata in the <title>, <desc>, <metadata>, RDF data, different editor's data such as sodipodi, and Inkscape ones, internal fonts and images (data URI), and also any external data links to CSS, JS libraries etc.. SVG 1.0 was standardized and adopted W3C Recommendation in 2001, SVG 1.1 W3C Recommendation was released two years later and updated more recently (Second Edition in 2011).

How to convert .SVG files

SVG to PNG Conversion must be done in case if you wish to have a fixed sized transparent bitmap image for apps, e-mailing, social media and programs incapable of handling SVGs. To do that use ImageMagick command: magick input.svg -background none output.png. However, it might need you to change density/pixel settings since it would produce too soft images. PDF has a vector graphic file format. Use Inkscape command: inkscape input.svg --export-type=pdf --export-filename=output.pdf to create a PDF from your SVG. You may also convert SVG to EPS, DXF, PNG and raw SVG using Inkscape. They preserve more features than a lot of other programs such as Inkscape specific features or vector curves.

You should consider converting SVG to JPG if it includes pictures only and needs to be accessible for as large number of devices and browsers as possible. Use the following command: magick input.svg -background white -flatten output.jpg Note that before applying this action any transparent background would become flattened while vector objects might suffer of some loss of clarity due to the JPG format nature. For preparing to publishing online you could compress SVGs in case if you run them through svgo command tool that allows to remove comments, empty characters and not used symbols from SVG files. In addition you can flatten text by creating outlines of text objects.

Converting SVGs may cause losing of animations, hyperlinking, CSS media, scripts, masks, external sources, accessibility.

Convert toToolCommand / note
PNG ImageMagick magick input.svg -background none output.png Rasterizes vectors; choose density or size for sharp output, and interactivity, text editability, and layers are lost.
PDF Inkscape inkscape input.svg --export-type=pdf --export-filename=output.pdf Useful for print and sharing; filters, blend modes, fonts, and CSS may be approximated depending on renderer support.
EPS Inkscape inkscape input.svg --export-type=eps --export-filename=output.eps For older publishing workflows; SVG transparency, filters, animation, and some gradients may not survive.
Plain SVG / optimized SVG SVGO svgo input.svg -o output.svg Removes redundant markup and metadata; aggressive plugins can alter IDs, styling hooks, accessibility text, or editor-specific data.
JPEG ImageMagick magick input.svg -background white -flatten output.jpg Creates a lossy raster image; transparency must be flattened and vector scalability is lost.
WebP ImageMagick magick input.svg output.webp Good for bitmap delivery after rasterization; no SVG DOM, CSS, animation, or searchability remains.
DXF Inkscape inkscape input.svg --export-type=dxf --export-filename=output.dxf Useful for CAD/CAM outlines; fills, filters, text layout, and clipping may need manual cleanup.

Common problems and fixes

It means the server uses improper mime types; image/svg+xml should definitely be sent but the usage of text/plain and application/octet-stream often leads to such consequences as well. In order to see if the SVG document works as expected when saved as a local document, try opening it by a proper text editor, Chrome, Firefox, Edge, and Safari; however, sometimes, some file extensions do lie, and you need to check if it is really SVG, or PNG, ZIP, PDF or anything else compressed. The "This page contains the following errors" warning appears whenever an editor fails to handle some malformed tags, characters, or the encoding declaration. Almost all vector graphics tools, Inkscape, any editors that support the XML format could easily handle such files and open them for fixing errors. Also, a problem like "Failed to load the requested file" usually means the extension of your file misleads you; try opening it in the text editor.

The problems with text reflow appear in case fonts cannot be found on the user machine and it is better either to install them, replace the font type with some safe ones, or just convert all text to paths via Inkscape or Adobe Illustrator. Problems with shadowing or with blur effects appear, for instance, whenever some special features supported by Inkscape fail in the target program because of old SVG export pipelines that don't handle this feature well enough, etc. When a part of external images fails to appear and there is black rectangle instead, then something went wrong in a <image href>; you'd rather embed this image with the help of the data URI. Sometimes, very big files have huge amounts of nodes and paths, embedded images or other resources - in order to fix all these issues, one can easily use svgo command line to minimize the amount of data. Finally, sometimes sites just don't like uploads of some vector format, so a PNG or even PDF should be used instead.

Security considerations

SVGS are capable of being active in terms of containing scripts (especially JavaScript), event handlers like onload, hypertext links, linking to outside resources, CSS, etc. That’s why they have more interactivity compared to bitmap images. When it comes to the use of SVGS by web browsers, there will be a difference in behavior depending on the way they are loaded into pages; namely, inline SVG in HTML won’t act in the same way as the one that was opened via an <img> link. SVGs that are uploaded by untrusted sources onto the page may turn into the XSS vector if they become the subject of inlining or have loose processing enabled, that’s why it is critical to make sure that they are sanitized in the process of uploading. Regular sanitizer will eliminate scripts, event handler attributes, foreignObject nodes, links to external files, unsuitable URLs and unnecessary metadata. SVG could provide access to some metadata like editors' metadata, file paths and names, layer information, RDF metadata, titles, descriptions and other comment and non-visible entities.

History and versions

SVG started life at the W3C as part of the SVG Working Group as the result of several proposals in the late 1990s related to web vector graphics, most notably PGML from Adobe and Sun, andVML from Microsoft, Autodesk, andMacromedia. The first version of the specification, SVG 1.0, became a W3C Recommendation back in September 2001, providingXML-based vector graphics on the open web. Following this,SVG1.1became a Recommendation in January 2003 and the default version implemented in browsers and editing software; its second editionwas released in 2011. In the 2000s, SVG Tinyand SVGBasic focused on constrainedand mobiledevices until full browser support was more widespread. Native browser support became more prevalent through the 2000s and 2010s, routinely eliminating the need for a plugin to display SVG files on websites. Updates to SVG 2 include updating thespecification as well as integratingpart of theformat with CSS,HTML,and other aspects of the overall web platform.SVGremains anopen standard at theW3Cand is used for a multitude of icons, logos, data graphics, mapping services, illustration, and graphical elements of website user interfaces. The compressedformat SVGZ uses gzip for itscompression and a different fileextension: .svgz.

An SVG file that is compressed via gzip is labeled with the file suffix ".svgz". This usually ends up keeping its original ".svgz" suffix, because many programs and browsers use this cue to trigger automatic file decompression when appropriate. This file will consume less disk storage than the ".svg" version would, but it will not be as convenient for direct visual review and editing from within a text editor. ".png": raster images with lossless compression and transparency support: pick ".png" for fixed size, captured screenshots or UIs, and universal compatibility, but do not expect it to support editable scaling of the rasterization. JPG/.JPEG: lossy, photograph quality bitmap images. Use for camera captures. Do not use for sharp logos or icons with transparency requirements. WEBP/AVIF are also more recent bitmap raster image file formats for efficient encoding of complex bitmapped designs; while simple vector lines and designs should be preferred in "SVG" format instead.

".pdf" files: for print distribution of the design in an exchangeable and multipage document format; EPS: vector image based format; lacks the up-to-date web interactivity and transparency supported in ".SVG" files: Adobe's proprietary "ai" files are better at preserving vector edit options and functionality provided by Adobe Illustrator than SVG file. DXF - CAD geometry description.

Comments (0)

Replying to

No comments yet. Be the first to share your experience with this file type.