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

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

Recommend

Architecture and component description of docker private library Harbor

This article will explain the composition of the ...

Best Practices for Sharing React Code

When any project develops to a certain complexity...

Security configuration and detection of SSL after the website enables https

It is standard for websites to enable SSL nowaday...

setup+ref+reactive implements vue3 responsiveness

Setup is used to write combined APIs. The interna...

Introduction to Royal Blue Color Matching for Web Design

Classical color combinations convey power and auth...

An article teaches you how to use Vue's watch listener

Table of contents Listener watch Format Set up th...

How to install Linux flash

How to install flash in Linux 1. Visit the flash ...

Reasons why MySQL 8.0 statistics are inaccurate

Preface Whether it is Oracle or MySQL, the new fe...

The table table uses: nth-child() to achieve alternate color change and alignment

Core code <!DOCTYPE html> <html lang=&qu...

Absolute path URL and relative path URL in html and subdirectory, parent directory, root directory

An absolute URL is used to represent all the conte...

Example statements for indexes and constraints in MySQL

Foreign Keys Query which tables the primary key o...

A detailed introduction to Linux file permissions

The excellence of Linux lies in its multi-user, m...

Implementation of two basic images for Docker deployment of Go

1. golang:latest base image mkdir gotest touch ma...

Detailed usage of kubernetes object Volume

Overview Volume is the abstraction and virtualiza...

Sequence implementation method based on MySQL

The team replaced the new frame. All new business...