Usage of SVG

Notice that the extra part of the picture is cut off along the edge. Svg image processing is the same as PNG and jpg.

Adobe Illustrator can directly save the file to SVG format.

save-as-svg

When saving, a dialog box will pop up to show the saving options. I don’t know much about the technical details of adobe illustrator. There is a complete SVG specification in SVG profiles. I found that there was no problem choosing SVG 1.1.

Interestingly, you can choose to click OK to save the file, or choose “SVG code…”, and it will open it with a text editor.

Both are useful.

The usage of SVG image

If you save SVG as a file, you can put it directly in the tag.

<img src="" alt="新西兰鹬鸵鸟">

In illustrator, its size is 612px502px.

artboard

This page can only put such a large picture. Of course, you can change its size just like PNG and jpg images. Here is an example (three SVG graphs of different sizes)

Browser support

Different browsers support this usage differently. Generally speaking, except IE8 / 6, it is basically supported.

If you want to support SVG images in all browsers, you can test the browser’s support with modernizer and replace it with normal images if necessary

if (!Modernizr.svg) {
  $(".logo img").attr("src", "images/logo.png");
}

David Bushell has a more ingenious approach, but you need to use javascript:

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">

You can also use svgeezy, which is a JavaScript plugin.

The usage of SVG background image

Similar to SVG image usage, you can also use SVG in background image.

<a href="/" class="logo">
  新西兰鹬鸵鸟
</a>
.logo {
  display: block;
  text-indent: -9999px;
  width: 100px;
  height: 82px;
  background: url();
  background-size: 100px 82px;
}

Note that we set the size of the background size to match the size of the logo element. We have to do this, otherwise the background image will go beyond the logo element and hide part of it. The length width ratio of background size should be consistent with the original image. But you can use the constant value of background size, contain or cover, to achieve different effects.

Browser support

The support of various browsers for SVG based background image can be seen here. But it’s basically the same as SVG images. The only browser not supported is IE6 / 8.

Modernizr also works here, and it’s more efficient. If the browser does not support SVG background image, the SVG file will not be loaded, because modernizer adds the “no SVG” CSS class to the HTML when it detects that it does not support SVG

.main-header {
  background: url(logo.svg) no-repeat top left;
  background-size: contain;
}

.no-svg .main-header {
  background-image: url(logo.png);
}

Another more ingenious method is to use multi background technology. Because each browser supports SVG and multi background image technology very similarly, if it supports multi background image, it will also support SVG. Therefore, our CSS declaration can be written as follows:

body {
  background: url(fallback.png);
  background-image: url(image.svg), none;
}

The usage of “inline” svg

You can actually copy the SVG code from the SVG file and paste it directly into the HTML. They have the same effect as using ordinary pictures directly.

<body>

   <!-- 把SVG代码粘贴到这里,图片会显示出来!  -->

</body>

The advantage of this is that the image data is in the HTML page, and the browser does not need to perform a single request to download it. In other words, it has the same advantages as using data URI. But the bad things are the same. For example, “bloated” page code, cache problems.

If you use a background language, such as PHP, you can use the include function to make the page cleaner

<?php include(""); ?>

Optimize svg

You should not be surprised: the SVG files saved with Adobe Illustrator are not optimized. There are useless information such as DOCTYPE, generating tool signature and so on. The SVG file itself is small, but who would hate smaller? Peter Collingridge has an online SVG optimization tool. Pass on the big one and download the small one.

If you have obsessive-compulsive disorder, you can also try this node JS tool.

Control SVG with CSS

Do you feel that SVG code is very similar to HTML code? This is because they are all XML in nature. There are two elements in our SVG file, one and one . We can directly add CSS class information to SVG code, just like writing HTML code.

<svg ...>
  <ellipse class="ground" .../>
  <path class="kiwi" .../>
</svg>

Now, the CSS style in the page is also valid for the elements in SVG. You don’t need to embed CSS code directly in SVG code. You can put it anywhere on the page, or even put it in a separate CSS file, and use tags to load it on the page. You can even use the: hover syntax for SVG elements. But please note that there are individual CSS attributes that don’t work for SVG. For example, background color is invalid for SVG because the fill attribute is used in SVG.

.kiwi {
  fill: #94d31b; 
}
.kiwi:hover {
  fill: #ace63c; 
}

Even better, SVG can achieve all the filter effects. For example, fuzzy processing. Let’s try:

<svg ...>
  ...
  <filter id="pictureFilter" >
    <feGaussianBlur stdDeviation="5" />
  </filter> 
</svg>

Now you can apply any CSS style to it:

.ground:hover {
  filter: url(#pictureFilter);
}

Here is an online demonstration of SVG filter effect:

Browser support

The support of various browsers for SVG based background image can be seen here. But it’s basically the same as SVG images. The only browser not supported is IE6 / 8.

A remedy for browsers that do not support inline SVG:

<svg> ... </svg>
<div class="fallback"></div>

Still using modernizr:

.fallback { 
  display: none;
  /* 确保尺寸是一样大小 */
}
.no-svg .fallback { 
  background-image: url(logo.png); 
}
Related Article
WordPress 3D rotating tag cloud

This 3D tag cloud is not the flash version of WP cumulus n years ago. This 3D rotating tag cloud Read more

Using wampserver tool to build local PHP + MySQL environment

No matter whether we use domestic space or foreign hosts, we prefer to go online after local debugging before setting Read more

How to install Linux system on Android phone

In our daily use of Android mobile phones, the installation of a complete Linux system will make mobile phones become Read more

How to backup your website data with Android phone

No matter what you do, backup is very necessary and important. Backup is just in case. Most of the time, Read more

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-spam image