[Translation]svg Learning series begins

SVG on the web too little to buy a book also can not buy the chance to meet a foreign friend's SVG learning some columns, translated under

Http://tutorials.jenkov.com/svg/index.html

About SVG

Scalable Vector graphics are based on Extensible Markup Language (a subset of the standard Common Markup Language) that describes a graphic format for two-dimensional vector graphics. It is developed by the World Wide Web Consortium and is an open standard.

Today most modern browsers support SVG ie9+ Firefox chrome, etc.

The biggest use of SVG is drawing a variety of icons, etc., directly on the Web page drawing

Because of the DOM node of SVG itself, it can communicate with other DOM nodes on the Web page

Here are some SVG drawings.

For example, an SVG rectangle

Code

<svg  xmlns= "http://www.w3.org/2000/svg"      xmlns:xlink= "Http://www.w3.org/1999/xlink" >    <rect X= "Ten" y= "height=" "width=" "          style=" Stroke: #ff0000; Fill: #0000ff "/></svg>

What it looks like on a webpage

How do I display an SVG in a Web page?

There are many ways

But we used to have two.

1 inserting SVG into the DOM as a DOM node

For example

<div><svg>    <circle cx= "cy=", "r=", "style=" Stroke: #006600; Fill: #00cc00 "/>    </svg ></div>

The advantage is that you can use a variety of JS tools such as jquery to operate SVG, events or anything can

2 Pictures and background images

Image

Display SVG content as a picture

Background image

div {    background-image:url (' my-svg-image.svg ');    background-size:100px 100px;}

There is also a recent birth of the user is to use SVG as a Web font, it is not an example, because I am not familiar with ....

[Translation]svg Learning series begins