SUMMARY SVG- / generic container attribute

reference:

SVG image Start Tutorial

MDN SVG

SVG Tutorial

SVG Getting Started - riding too

tool:

svg online editing

Outline

SVG is an XML-based syntax of image formats, it stands for scalable vector graphics (Scalable Vector Graphics). Other image formats are based on pixel processing, SVG is part of the shape description of the image, so it is essentially a text file, a small volume, and no matter how many times will not be amplified distortion.

SVG files can be directly inserted into web pages and become part of the DOM, and then follow with JavaScript and CSS. Such as:

<svg width="150" height="100" viewBox="0 0 3 2">
    <rect width="1" height="2" x="0" fill="#008d46" />
    <rect width="1" height="2" x="1" fill="#ffffff" />
    <rect width="1" height="2" x="2" fill="#d2232c" />
</svg>

SVG code can be written in a separate file, and then <img>, <object>, <embed>, <iframe>and other labels on the page.

<img src="circle.svg">
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="icon.svg" type="image/svg+xml">
<iframe id="iframe" src="icon.svg"></iframe>

CSS can also use the SVG file.

.logo {
  background: url(icon.svg);
}

SVG files can also be converted to BASE64 encoding, and then written as a Data URI page.

<img src="data:image/svg+xml;base64,[data]">

container`svg`

label`<svg>`

SVG code <svg>element start, including opening tag <svg>and closing tag </svg>, which is the root element.

Attributes	meaning
`width`	Width, the default value `300px`, or a percentage of pixels may be used (units `px`)
`height`	Height, default value `150px`, or a percentage of pixels may be used (units `px`)
`version`	Definable used `SVG`version
`xmlns`	Define `SVG`namespaces
`viewBox`	Define the position of the viewport, the attribute value of four digits, respectively horizontal and vertical coordinates of the upper left corner, width and height of the viewport

Example:

<svg width="100" height="100" viewBox="50 50 50 50">
  <circle id="mycircle" cx="50" cy="50" r="50" />
</svg>

In the above code, SVG image is 100 pixels wide x 100 pixels high, the viewBox attribute specifies the viewport (50, 50) begins at this point. So, actually see the bottom right corner of a quarter circle.
Note that the viewport must adapt space is located. In the above code, the viewport size is 50 x 50, since the size of the SVG image is 100 x 100, so that the viewport adapted to enlarge the size of the SVG image, i.e., enlarged four times.
If you do not specify the width attribute and the height attribute, specifies only the viewBox attribute, the equivalent aspect ratio is only given SVG image. In this case, the default size will be equal to the size of the SVG image where HTML elements.

SVG embedded inside the SVG

Than the HTML, SVG allows you to seamlessly embed svg other elements. So you can use the property of internal svg elements viewBox, attributes widthand attribute heightsimply create a new coordinate system.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <svg width="100" height="100" viewBox="0 0 50 50">
    <rect width="50" height="50" />
  </svg>
</svg>

Rectangle will be twice as large as specified.

Element in the common property

SVG CSS properties with different page elements.

`fill`

Fill Color

`fill-opacity`

Fill color transparency (valid range: 0 - 1)

`stroke`

Stroke color

`stroke-width`

Stroke color wide

`stroke-linecap`

It represents the stroke cap expression. Possible values are: butt, round, square, inherit.

`stroke-linejoin`

He represents the expression stroke angle. Possible values are: miter, round, bevel, inherit.

`stroke-opacity`

Transparency stroke color (legal range: 0--1)

`stroke-miterlimit`

Stroke represents the intersection (acute angle) expression. The default size is 4. What loss angle rotation angle of a slope or the like means, the larger the value, the smaller the loss.

`stroke-dasharray`

To control the stroke-dot chain line pattern paradigm, it is one <length>and <percentage>the number of columns, the number of the number with a comma separated or blank, designated dash and gap length. If an odd number of values is provided, then the column number of the value is repeated once so as to become an even number of values. Thus, 5,3,2,5,3,2 5,3,2 equivalent.

`stroke-dashoffset`

The dotted line represents a start offset. Optional value: <percentage>, <length>, inheritpercentage value, length value, inheritance.

`opacity`

Defined value of the whole transparent element (valid range: 0 - 1)