This is the sixth day of my participation in the August More text Challenge. For details, see:August is more challenging

What is the SVG

Created in 1999, SVG is an XML language that resembles XHTML, or SVG, and can be used to draw vector graphics, such as the one shown on the right. SVG can create a graph by defining the necessary lines and shapes, modifying an existing bitmap, or combining the two. Graphics and their components can be deformed, synthesized, or completely altered through filters.

Why learn SVG? What are its advantages?

The advantages of SVG over other image formats such as JPG and GIF are:

  1. You can use any text editor to create a paintingSVG.
  2. You can search, index, script, compressSVGThe image.
  3. SVGImages can be expanded and can be displayed in high quality at any resolution.
  4. SVGImages can be scaled without losing any quality.
  5. SVGIt’s open standard, it’s pureXMLFile.
Draw a simple SVG
<svg width="300" height="200">
    <rect width="100%" height="100%" fill="blue" />
    <circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>
Copy the code

  • Draw one aboveSVGThe basic flow
    • Draw asvgRoot tag
    • Draw arectLabel, which is a label that draws a rectangle, width and height set100%So if you fill up the parent element,fillProperty to set the background color
    • Draw acircleTag, which is a label that draws a circle,cxandcyIs an offset property (default is0That is, the center of the circle is in coordinates0.0Chinese painting),rIt’s the radius
Rendering rules
  • svgElements in the render order, the rule is that the later to render the elements in the ahead.
Several ways to nest an HTML file

  • XHTML needs to declare the type Application/XHTML + XML in order to embed SVG in XML.

  • HTML5 can embed SVG directly. But some grammatical tweaks are needed.

    • You can reference an SVG file with the object element:

    • <object data="image.svg" type="image/svg+xml" />
Copy the code

    • Similarly, you can reference an SVG file using an iframe element:

    • <iframe src="image.svg"></iframe>
Copy the code

    • Using the IMG tag to reference an SVG file:

    • <img src="image.svg" style="display:block; width:200px; height:200px" />
Copy the code

    • Use the embed tag:

    • <embed src="image.svg" style="display:block; width:200px; height:200px" />
Copy the code

    • Div tag:

    • <div style="display:block; width:200px; height:200px; background: url(./image.svg) no-repeat; background-size: 100%;" ></div>

Copy the code

    • Use the picture label:

    • <picture>
    <source srcset="image.svg"  type="image/svg+xml">
    <img src="image.svg" style="display:block; width:200px; height:200px">
</picture>
Copy the code

SVG File types

  • svgFiles come in two forms
    • ordinarySVGFiles: IncludedSVGA standard text file, usually with a suffix of.svg.
    • Compressed versionSVGFile: in a certain scenarioSVGThe file may be large and is allowed by the SVG standardgzipCompressed, usually with a suffix of.svgz(Note that inFireFoxCannot be loaded locallysvgzFiles, unless you know how to handle the releasewebThe server can handle it correctlygzipOtherwise avoid usinggzipCompression of theSVG).

The last

This article covers the use of SVG in its simplest form and the various ways to embed SVG in HTML. The next article will cover SVG mesh positioning, image drawing, and more.

😀😀 Pay attention to me, don’t get lost! 😀 😀