D3 visualization 01: Understanding the characteristics of SVG elements

1. Introduction to SVG

-----------------------------------------------------------------

SVG is a vector image format unrelated to image resolution. It uses strict XML syntax to describe the image content. With regard to it, the host at the Massachusetts Institute of Technology's W3C official site has a comprehensive introduction (http://www.w3.org/Graphics/SVG ).

The above picture shows the difference between a bitmap and a vector image. Bitmap is composed of vertices, while a vector is composed of some shape elements. In this figure, the enlarged bitmap shows the point, while the enlarged vector still shows the shape. SVG is a vector image, so it can be scaled without any mosaic.

I personally think that the history of the emergence and development of a language, whether it is a computer language or a natural language, is a very good starting point.

SVG was first proposed by a series of companies that joined W3C in 1999, moreover, SVG has long been known for its advantages such as easy reading, editing, easy script control, and easy to create interactive images on webpages, however, it was not until 2011 that it was finally included in the W3C standard. The IE series has long been unable to support SVG until ie9. There are profound historical reasons for this result.

The SVG format is not the first vector graphics format. One year before it was proposed, Adobe joined IBM, Netscape, and Sun's pgml format (precision graphics Markup Language) and Microsoft's VML format (Vector Markup Language) submitted to W3C. While the two were not in conflict with each other due to fierce business competition, W3C started a SVG team and spent six months developing the SVG standard on the basis of pgml and VML, hope to bridge the differences between the two camps-but the result is that SVG has become the third competitor. However, due to the advantages of SVG and many similarities with pgml, many companies in the pgml camp have joined the SVG camp. However, Microsoft is still independent. At that time, Microsoft was already a dominant player in the world. In the browser competition, Netscape could not be crawled by bundling policies. Although Microsoft's VML was rejected by W3C, it was still quite self-built. Therefore, Microsoft's ie5.0 + and Microsoft Office 2000 + Versions later only use VML, it was not until Microsoft gave up VML in 2008. In addition, Adobe Flash has been occupying a large market share of vector graphics programs, competing with common vector graphics format SVG. The above problem resulted that SVG was not listed as W3C standard until 2011, 12 years after its birth. I can only say that some people have rivers and lakes, and the establishment of technical standards is inseparable from the interference of rivers and lakes rules. Fortunately, Google Chrome, rather than IE, is the browser with the highest market share. It is particularly worth mentioning that in the mobile field, the support rate of SVG is very high due to Microsoft's marginalization. Use SVG to create interactive images!

Ii. Basic Elements of SVG

-----------------------------------------------------------------

There are many SVG labels. For details, see w3cschool. For the sake of simplicity, the elements can be divided into three categories: vector graphics, text, and reference bitmap. The common examples are as follows:

• Vector Graphics: SVG, rect, circle, ellipse, path, line ), ploygon, title, DESC, G, and defs ).
• Text: Text, anchor ()
• Reference bitmap: image (image element)

These elements are simple and can be understood simply by reading the document, but I personally think they are worth mentioning as follows:

1. The path function of SVG is powerful, and almost any image can be implemented. Coupled with the lossless scaling feature of SVG, other front-end technologies do not have their right.
2. To control SVG objects, you usually need to control their unique attributes. For example, the fill color is fill, the fill border is stroke, and the deformation is transform. These are different from HTML objects.
3. For the filter and gradient effects of SVG images, the SVG filter tag or gradient tag must be used as the reference object for color filling.(This is encapsulated in the Raphael class library, but D3 does not. D3 does not care much about these style issues. D3 focuses on data conversion)
4. The displacement, rotation, scaling, and deformation of SVG can all be achieved through the transform attribute. With SVG animation labels, you can create various animation effects without relying on JS and CSS.
5. SVG can also contain the hyperlink anchor tag <A>, text tag <text>, Image Tag <image>, and so on. Therefore, you can use SVG to create a webpage or include animated effects.
6. In practical applications, complex graphic code is hard to read. Especially when multiple layers of groups, complex paths, and various filters are involved. Therefore, SVG editors are almost required for graphic design, such as Adobe Illustrator, Visio, CorelDraw, online tools SVG-edit, open-source software scribus, karbon14, inkscape, and sodipodi.
7. In fact, the dynamic part of SVG technology itself (including timing control and animation) is based on the SMIL standard. SVG files can also be embedded into JavaScript (in strict terms, it should be ecmascript) scripts to control SVG objects. Therefore, it is highly efficient to use native JS or JS class libraries encapsulated like d3.js to control SVG.
8. Note:It is not feasible to directly add, delete, and modify DOM elements of SVG using jquery.After all, jquery is not designed to operate SVG like D3. If jquery is required, download the jquery SVG control plug-in.

 

Iii. Joint Use of SVG and HTML

-----------------------------------------------------------------

In modern browsers, SVG and HTML are parallel. We usually embed a set of SVG elements in an HTML page to express vector content. However, considering the complexity of some interactive operations, we may need to display HTML tags such as divs in SVG elements. Unfortunately, the result is that these embedded HTML tags are not displayed. This is a common problem when using SVG to create interactive charts. There are two solutions:

1. Wrap the DIV using the SVG Element foreignobject. For details, see http://ajaxian.com/archives/foreignobject-hey-youve-got-html-in-my-svg. However, any version of IE does not support foreignobject! Including the new ie11! When do you need to harm Microsoft!

2. Define the DIV as a floating layer, and use the left, top, and other attributes to calculate the position. The floating position is displayed on top of the SVG image. This is a common method, because D3 can also control HTML elements at the same time, and the animation effect can be solved through css3 without any compatibility issues. For details, see my previous article: Create an SVG text interaction area. Note: HTML object in SVG

Iv. CSS and SVG

-----------------------------------------------------------------

It is necessary for me to say something about the compatibility of children's shoes. If you have already consumed poison, please lick your plate!Now that SVG is used, you can use css3 with confidence.. Because all modern browsers support SVG and modern browsers support css3, why not? Make CSS 3 animation effects, shadow effects, and rounded corners more intense!

It must be noted that the standard specification of css3 greatly references SVG. Especially for the deformation and animation effects of css3, we can compare the writing methods of css3 and SVG, which are exactly the same! Therefore, when using SVG to create charts, you can use CSS 3 animation effects to process HTML elements. Of course, because some css3 effects have different support conditions in different browsers, some support conditions are not very good, such as deformation. You still have to write five prefix statements in one breath for the same attribute, to ensure compatibility, as shown below (in this program, we use D3 to zoom in and out the DIV, and actually use css3 for processing ):

 

1234567

D3.select ("Div "). style ({"transform": "Scale (" + config. scale + ")", "-WebKit-transform": "Scale (" + config. scale + ")", "-moz-transform": "Scale (" + config. scale + ")", "-o-transform": "Scale (" + config. scale + ")", "-MS-transform": "Scale (" + config. scale + ")"})

It should also be pointed out that, of course, SVG elements can also use CSS to specify styles. For example, you can write d3.select (". path "). class ("active", true), assign a CSS class named active to path, and write the style into CSS. Of course, CSS must write the attributes of SVG, such as fill and stroke.

 

I want to use SVG to edit the software. Let's get started with SVG! (From Wikipedia)

D3 visualization 01: Understanding the characteristics of SVG elements