Skip to content
Search

Scalable Vector Graphics

lastmod 2026-03-05created 2015-06-1057 edits

Scalable Vector Graphics (SVG) is an XML-based file format for representing two-dimensional vector graphics. It is an open-standard vector graphics file format developed in 1999 under the lead of the W3C (World Wide Web Consortium). SVG images and their behavior are defined in XML text files, so they can be searched, indexed, and scripted, and compressed if needed.

SVG files can be edited with professional SVG-based graphics editing programs. Of course, since they are XML files, they can also be edited with a text editor.

Currently, most major web browsers support SVG, except Microsoft Internet Explorer 8 and earlier versions. In Internet Explorer, a separate plugin must be installed manually to view SVG files; otherwise, the web page author must include SVG Web, a JavaScript library under development on Google Code, in the web page code.

Categories

Libraries

Online tools

Vector graphics editor Projects

Plugins

Examples

Resources

SVG Tag 

<svg width="200" height="200" viewBox="0 0 100 100">

The overall SVG canvas size is 200x200 pixels. However, using the viewBox attribute, a 100x100px view starting at (0,0) is displayed on a 200x200px screen.

viewBox

The viewBox attribute specifies that a given set of graphics stretch to fit a particular container element.

The value of the viewBox attribute is a list of four numbers: min-x, min-y, width, height.

It specifies a rectangle in user space that should be mapped to the bounds of the viewport established by the given element, and it is related to the preserveAspectRatio attribute.

Negative values for width or height are not allowed, and a value of zero disables rendering of the element.

Using components copied from icones

How to use it so that Tailwind font size classes apply properly. First, the component: 

import {SVGProps} from 'react';

export function BiFileEarmarkPdf(props: SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      viewBox="0 0 16 16"
      {...props}
    >
      <g fill="currentColor">
        <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"></path>
      </g>
    </svg>
  );
}

export default BiFileEarmarkPdf;

When using it, apply inline-block so the text aligns properly. 

<BiFileEarmarkPdf
  className="inline-block text-center text-lg"
  onClick={e => onClickExportPdf(e, d)}
/>

Including SVG in HTML documents

SVG code can be used in a document with the following HTML elements.

Image

The easiest way to use an SVG file (*.svg) in an HTML document is to set the file's path in the src attribute of the <img> element. If the image carries meaning, provide appropriate alternative text. 

<img src="king.svg" alt="킹 (체스 말)">

Embed (embed)

The way to include an SVG element in an HTML document using the embed element is to set the file's path in the src attribute of the

<embed>

element. If the image needs to be described, provide appropriate alternative text through the aria-label attribute. 

<embed src="king.svg" type="image/svg+xml" aria-label="킹 (체스 말)">

Object (object)

The way to include an SVG element in an HTML document using the object element is to set the file's path in the data attribute of the <object> element. If the image needs to be described, provide appropriate alternative text through the aria-label attribute. 

<object data="king.svg" type="image/svg+xml" aria-label="킹 (체스 말)"></object>

Iframe (iframe)

The way to include an SVG element in an HTML document using the iframe element is to set the file's path in the src attribute of the <iframe> element. If the image needs to be described, provide appropriate alternative text through the aria-label attribute. 

<iframe src="king.svg" aria-label="킹 (체스 말)"></iframe>

Inline SVG

The way to include an SVG element in an HTML document using the iframe element is to set the file's path in the src attribute of the <iframe> element. If the image needs to be described, you should provide the content with SVG accessibility in mind. 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <!-- king.svg 코드 -->
</svg>

===

<svg>

element ===

<svg>

element is the start of an inline SVG. Many attributes can be added to the svg element. Typically, the version, xmlns, xmlns:xlink, viewbox, width, and height attributes are set. 

<svg
  version="1.1"
  xmlns=http://www.w3.org/2000/svg
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="520" height="520"
  viewBox="0 0 520 520">
  ...
</svg>

However, for inline SVG code, the following attributes are not needed for rendering in a web browser.

  • version
  • xmlns
  • xmlns:xlink

Therefore, when using inline SVG, you can write it concisely as in the code below. 

<svg width="520" height="520" viewBox="0 0 520 520">
  ...
</svg>

Web canvas (canvas) 

var example = document.getElementById('example');
var context = example.getContext('2d');

var img = new Image();
img.onload = function() {
    context.drawImage(img, 0, 0);
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";

Elements

Path

See also

Favorite site

Download Resources

MSDN

MDN

Tutorials

Guides

author Zer0 sitemap