How to solve the problem of blurry small icons on mobile devices

Preface

Previously, I talked about the problem of vertical misalignment between images and text. In the small example given, a small icon was used. I used a background image to display this small icon:

.del .icon{ display: inline-block; width: 20px; height: 25px; margin-right: 5px; 
vertical-align: middle; background: url("imgs/delete.png") no-repeat center; background-size: 100%;}

The actual size of the delete.png icon is 20px, and it displays normally on the PC:

But when I put it on my phone, oops! Why is the icon blurry? !

Ok, since the picture is not clear enough, just use a bigger icon, just double the size and use 40px!

What? Still a little blurry?

Then make it a little bigger...Are you tired? Isn't there a better solution? The answer is of course yes!

Use a vector image to put it on, that is, SVG is here to play!

Of course, the specific syntax of SVG is not described in detail in this article. Here we will briefly explain how to directly convert the PNG bitmap into an SVG vector image in the above example:

1. Click to enter IcoMoon and search for the keyword delete

2. Select the delete icon

3. Click the button on the bottom left to switch to the new page

4. At this time, you can click the text "Get Code" below the icon and a dialog box will pop up

Dialog Box

5. First, take out the Symbol Definition(s) code and put it in the frontmost div in the body, and set the div to be hidden; then take out the HTML part (SVG) to replace the original PNG icon; finally, take out the CSS part (make slight modifications according to needs, such as size) and put it into the style sheet.

<!--HTML section-->
<body>
    <div style="display: none;">
        <!--As an SVG library that can be used on demand-->
        <svg>
            <symbol id="icon-bin" viewBox="0 0 32 32">
                <title>bin</title>
                <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
                <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
            </symbol>
        </svg>
    </div>
    <div class="del"><svg class="icon icon-bin"><use xlink:href="#icon-bin"></use></svg><!--Call here according to the icon id as needed--><span>Delete</span></div>
</body>

/*CSS part*/
.del{ font-size: 20px;}
.del .icon{ display: inline-block; width: 20px; height: 25px; margin-right: 5px; vertical-align: middle; fill: currentColor;}
.del span{ vertical-align: middle;}

I won’t explain the CSS part above, here I will briefly talk about the HTML part.

The hidden part of SVG above can be regarded as an SVG library. You can put all the SVG icons you need in the page in it. Each symbol represents an SVG icon, and then call it according to the id through xlink:href where you need to use the icon. The professional term is SVG Sprites, which feels much more convenient than CSS Sprites. The most important thing is that it is a vector image, which will not be distorted no matter how you zoom in or out.

Let me give you an example~~

What should I do if I need to change the above icon to an “×”, but want to keep the previous icon as a backup?

It’s very simple. Just add the SVG code of “×” to the “SVG Library”, like this:

<div style="display: none;">
    <!--As an SVG library that can be used on demand-->
    <svg>
        <symbol id="icon-bin" viewBox="0 0 32 32">
            <title>bin</title>
            <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
            <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
        </symbol>
        <!--Add new icon-->
        <symbol id="icon-cross" viewBox="0 0 32 32">
            <title>cross</title>
            <path d="M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z"></path>
        </symbol>
    </svg>
</div>
<div class="del"><svg class="icon icon-bin"><use xlink:href="#icon-cross"><!--Note that the id name has changed here--></use></svg><span>Delete</span></div>

Then it becomes like this, the replacement is successful!

Summarize

The above is the full content of this article. I hope that the content of this article will have certain reference learning value for your study or work. If you have any questions, you can leave a message to communicate. Thank you for your support for 123WORDPRESS.COM.

<<: Analysis of the HTML writing style and reasons of experienced people

>>: Introduction to the use of MySQL source command