“Don’t be afraid, don’t compromise, work hard in the future” – hello! I am little sesame 😄

Saved for many years of draft box, the plan to perfect after a release, but in order to participate in the activity, also can only be released bit by bit, no way to talent and learning, new creation is certainly too late, in order to catch up with the progress, can only be the worst way 😂

Introduction to SVG

1. What is SVG

Scalable Vector Graphics (SVG) Scalable Vector Graphics It is an XML markup language used to describe two-dimensional vector graphics.

  • SVG stands for Scalable Vector Graphics
  • SVG is used to define vector-based graphics for networks
  • SVG uses an XML format to define graphics
  • SVG images can be enlarged or resized without loss of graphic quality
  • SVG is the World Wide Web Consortium standard
  • SVG is integrated with W3C standards such as DOM and XSL

2. Features and Advantages

The advantages of using SVG over other image formats are:

  • SVG can be read and modified by a large number of tools (such as Notepad)
  • SVG is smaller and more compressible than JPEG and GIF images.
  • SVG images can be printed at any resolution with high quality
  • SVG can be enlarged without degrading image quality
  • Text in SVG images is optional and searchable (good for mapping)
  • SVG is an open standard
  • SVG files are pure XML

3. Browser compatibility

Chrome, Safari, FoxFire1.5, Opera9, IE9 and above are supported, but SVG SMIL animation is not supported in IE browsers (including IE11) (basic support for mobile)

2. How to use SVG

For browsers that directly support SVG, SVG is mainly rendered in two ways: on both sides.

1. Inline to HTML

SVG is a standard HTML element that can be written directly into HTML, like this:

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect x="0" y="0" width="100%" height="100%" fill="red" stroke="black"/>
    <text x="50%" y="50%" fill="yellow" style='dominant-baseline:middle; text-anchor:middle; font-size:36px'>Hello world</text>
  </svg>
</body>
</html>
Copy the code

2. Independent SVG files

Standalone SVG refers to the vector graphics file format provided by using the SVG file extension. The format is as follows:

  • 1. Open it directly in the browser
  • 2, using the tag in HTML
<img src="./1.svg">
Copy the code
  • 3, as a CSS background
.box{
  width: 300px;
  height: 200px;
  background-image: url('./1.svg');
}
Copy the code
<embed src="1.svg" width="300" height="100" type="image/svg+xml"
    pluginspage="http://www.adobe.com/svg/viewer/install/" />
Copy the code
  • Embed advantage: Supported by all major browsers and allows scripting
  • Embed disadvantages: Not recommended in HTML4 and XHTML (but allowed in HTML5)

<object data="1.svg" width="300" height="200" type="image/svg+xml"
  codebase="http://www.adobe.com/svg/viewer/install/" />
Copy the code
  • Object advantages: All major browsers support and support the HTML4, XHTML, and HTML5 standards
  • Object Disadvantage: Scripting is not allowed.
<iframe src="1.svg" width="300" height="200"></iframe>
Copy the code
  • Iframe advantages: All major browsers support it and allow scripting
  • Iframe disadvantages: Not recommended in HTML4 and XHTML (but allowed in HTML5)

3. Render SVG

1. Render order

SVG is rendered strictly in the order in which elements are defined, unlike HTML, which uses z-index values to control layering.

In SVG, elements written earlier are rendered first, and elements written later are rendered later. Subsequent elements are drawn on top of the previously drawn elements. => “Catch up”

<svg style="outline: 2px solid red;" width="200" height="200">
  <rect x="0" y="0" width="150" height="150" fill="yellow"/>
  <rect x="0" y="0" width="100" height="100" fill="red"/>
</svg>
Copy the code

2. Rendering steps

When rendering a single graphic element: (same for groups)

  • Create a temporary canvas of transparent black
  • 2. Draw the element onto the temporary canvas
  • 3. Apply the appropriate filter effect
  • 4. Set the appropriate clipping, mask and opacity effects
  • 5. Combine the modified temporary canvas into the background

3. Three image types for rendering

SVG supports three basic image elements: vector graphics, text, and bitmap images.

  • Vector graphics: a combination of color blocks of lines and curves;
  • Text: Characters in text form
  • Lattice image: A block describing the color values of pixels in a rectangular area, represented as a two-dimensional array.

I’ll see you next in Introduction to SVG Coordinates

reference

  • [1] SVG
  • [2] w3school