1. The concept

1.1 define

Scalable Vector Graphics (SVG) is an XML-based markup language for describing two-dimensional Vector Graphics. As a text-based open web standard, SVG can render graphics of different sizes elegantly and concisely, and it works seamlessly with other web standards such as CSS, DOM, JavaScript, and SMIL. In essence, SVG is to images what HTML is to text.

Codepen. IO/xjGafi/pen /…

1.2 Basic Attributes

1.2.1 Stroke features

1.2.2 Filling Features

1.3 Key Attributes

1.3.1 viewBox properties

The value of the viewBox property has four numbers: the abscissa and ordinate in the upper left corner, and the width and height of the viewport. In the code above, the SVG image is 100px wide and 100px high, and the viewBox property specifies that the viewport starts at the point (50, 50). So what you actually see is a quarter circle at the bottom right.

Attention Required! | Cloudflare

Note that the viewport must fit the space in which it is located. In the code above, the viewport size is 50 x 50, and since the SVG image size is 100 x 100, the viewport is enlarged to match the SIZE of the SVG image, i.e., four times larger.

Specifying only the viewBox property without specifying the width and height properties is equivalent to giving only the aspect ratio of an SVG image. At this point, the default size of the SVG image will be equal to the size of the HTML element in which it is located. (Default width 300px and height 150px when width, height and viewBox attributes are not specified)

1.4 Basic Labels

Basic label graphic label this relatively easy to understand, we directly summarize a table.

1.5 Key Labels

1.5.1 path tag

In SVG, you can think of path as the most basic drawing element, and because it is so basic, it can evolve all kinds of complex drawing effects. So path is the most basic and complex drawing element.

The most important attribute of the path tag is the D attribute, which is a collection of instructions and parameters. In the value of the D attribute, we see a bunch of very complicated instruction strings.

<path d=" M73.8616812,68.8664775 L74.5015359,74.5939423 L68.1746283,71.7969507 C66.2299599,72.4159872 64.1377269,72.7711218 61.9444643,72.7711218 C51.9719158,72.7711218 43.8883163,65.7823167 43.8883163,57.1611168 C43.8883163,48.5399169 51.9719158,41.5511118 61.9444643,41.5511118 C71.9164005, 41.55111118 80,48.5399169 80,57.1611168 C80,61.8286883 77.6181486,66.006419 73.8616812,68.8664775 "fill="#000"> </path>Copy the code
  • Those instructions in the D property

These are all directives in the path path, and each directive has a corresponding lowercase directive.

For example, M 10,10 has a corresponding M 10,10

  • Uppercase represents absolute position, which is absolute to the origin in the upper-left corner of the SVG canvas.

  • The lower case represents the relative position, which is the position of the current brush.

1.6 SVG to draw the Olympic rings

Codepen. IO/xjGafi/pen /…

2. Use

2.1 Using SVG as an image

SVG is an image format, so it can be included in HTML pages in the same way as other image types.

Two specific methods can be adopted:

  • To include an image in an HTML tagWithin elements (recommended when images are an essential part of the page);

  • Or insert the image as a CSS style property of another element (recommended when the image is primarily used for decoration).

No matter which method you use to include SVG files as images, there are certain limitations. Image rendering (that is, “drawing,” where the SVG code is converted to raster images for display) is separate from the home page and cannot communicate between the two. The styles on the main page are not valid for SVG. In addition, scripts running on the main page cannot sense or modify the document structure of SVG.

Codepen. IO/xjGafi/pen /…

Internet Explorer supports direct inlining, but for security reasons, some characters need to be safely escaped.

2.2 Using SVG as an application

To integrate an external SVG file into an HTML page without the limitations of embedding as an image, you can use an embedded object.

Elements are a common way to embed external files into HTML(version 4 and above) and XHTML documents. It can also be used to embed files of any type, as long as the browser has an application (browser plug-in or extension) that parses the file type. Embedding SVG allows users of older browsers who cannot display SVG directly but have an SVG plug-in to view images.

The type attribute of the element indicates the type of file to be embedded. This property should be a valid network media type (often referred to as a MIME type). For SVG, use type=”image/ SVG + XML “.

<object data="cat.svg" type="image/svg+xml" title="Cat Object" alt="Cat"> 
    <p>No SVG support! Here's a substitute:</p>
    <img src="cat.png" title="Cat Fallback" alt="Cat"/>
</object>
Copy the code

Elements must have a start tag and an end tag. The content between the two tags will only be displayed if the object data itself cannot be rendered. This can be used to specify alternate images or warning text to display in case the browser cannot display SVG.

2.3 SVG markup in Mixed Documents

Here are two ways to display a single, complete SVG file. However, it is possible to include BOTH SVG code and HTML or XML markup in one file.

2.3.1 Foreign Objects in SVG

Insert some HTML(or other) content in SVG.

The element has great potential for creating hybrid SVG/XHTML documents, but is not currently well supported. Internet Explorer (as of version 11) doesn’t support it at all, and there are bugs and inconsistencies in other browser implementations.

Codepen. IO/xjGafi/pen /…

The < foreignObject > tag can be used to capture snapshots.

  1. Start by declaring a basic SVG template that requires some basic descriptive information, most importantly the pair of tags;

  2. Embed foreignObject into the DOM template template to render;

  3. Build SVG objects using Blob;

  4. Extract the URL using url.createObjecturl (SVG).

2.3.2 Inline SVG in HTML5

This way of including SVG in Web pages is called inline SVG. The simplest way to do this is to set XMLNS =”http://www. w3.org/2000/svg” on the top-level element, which changes the default namespace for that element and all of its children. For HTML5 documents (files used), namespace declarations can be skipped in tags. The HTML parser automatically recognizes that an element and its children are in the SVG namespace, except for the child elements of the element.

This approach allows communication between HTML and SVG. This means that you can modify the document structure of SVG using CSS and JS on the home page.

Demo 1: Simple interaction with embedded SVG graphics using CSS

Codepen. IO/xjGafi/pen /…

Demo 2: Make icon library by stitching together multiple SVGS

Codepen. IO/xjGafi/pen /…

The element

  • Repeating elements often occur in complex graphics and can be displayed again using tags. To specify which combination you want to reuse, give the URI to the xlink:href attribute, along with the x and y positions to indicate where the combined (0, 0) point should be moved.

The element

  • By placing these composite objects between the start and end tags, we can tell SVG to define but not display them. In fact, the SVG specification recommends that we place all objects that we want to reuse inside elements so that SVG readers can process data more efficiently in a streaming environment.

  • Because they are grouped within elements, they are not immediately drawn to the screen, but serve as “templates” for use elsewhere.

The element

  • The element takes all of its child elements as a combination and provides annotations for them, which makes our document structure clearer. In addition, the elements provide some writing convenience.

The element

  • The element provides another way to combine elements. Unlike elements, elements are never displayed, so we don’t need to put them in the specification. However, we are still used to putting it in because symbol is also an element we define for subsequent use. Symbol can also specify viewBox and preserveAspectRatio attributes. By adding width and height attributes to the element, symbol can be adapted to the viewport size.

3. Reference links

blog

  • Ruan Yifeng: An introduction to SVG graphics

  • Simple SVG

  • Nuggets: Move towards powerful SVG

  • CSS-Tricks: The SVG path Syntax: An Illustrated Guide

  • Zhang Xinxu: Deeply master the BEZier curve instruction of SVG path

  • Zhang Xinxu: I learned that CSS has a better form for inlining SVG images than Base64

  • Zhang Xinxu: SVG introduction and screenshots and other applications

  • svgtrick

The document

  • MDN: SVG element reference

  • SVG manual

tool

  • SVG Path Visualizer 📐

books

  • The Essence of SVG (Version 2)

  • In-depth understanding of SVG

code

  • GitHub: Interactive 3D Mall Map

  • Essence of SVG (version 2) – Sample code