Here is a quick tip for implementing 1px mobile effects in SVG

Stroke in SVG

Usually when we use some design software, there are three options for stroke, they are inside stroke, center stroke and outside stroke, such as Photoshop

So, what is stroke in SVG?

The answer is centered stroke and cannot be changed as follows

<svg height="100px" viewBox="0 0 100 100">
    <rect x='10' y='10' width='40' height='40' fill='none' stroke-width='10' stroke='red' />
</svg>
Copy the code

As you can see, the rect stroke is centered, with 5 on each side

The realization of 0.5 px

According to the above conclusion, if the stroke-width is 1, it can be easily divided into 0.5 on each side and then cut off the outer part

Set the width and height of rect to 100%, and SVG defaults to overflow:hidden, as shown below

<svg height="100px" viewBox="0 0 100 100">
    <rect width='100%' height='100%' fill='none' stroke-width='1' stroke='red' />
</svg>
Copy the code

Compare the 1px effect here

<div style="box-sizing: border-box; width:100px; height:100px; border:1px solid red;"></div>
Copy the code

You can use your phone to visit or scan the following sites to experience

Codepen. IO/xboxyan/pen…

SVG is used as a background

This is a direct use of SVG tags, not for real projects, but SVG can be used as a background image, for example

div {
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='none' stroke-width='1' stroke='red' /></svg>");
}
Copy the code

Simply add data:image/ SVG + XML to the front of SVG to indicate that this is an image in SVG format, similar to base64. Behind the SVG attribute XMLNS = ‘http://www.w3.org/2000/svg’ said namespace, temporarily can’t remove, remember this rule

Of course, UNDER IE, SVG may need to be escaped to display normally. Here you can refer to zhang Xinxu’s article

Let’s look at a couple of cases

1. 1px line

This is especially common on mobile, so you can do this by drawing a line at the bottom using line

p {
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='100%' x2='100%' y2='100%' stroke='red' /></svg>");
}
Copy the code

Results the following

Codepen. IO/xboxyan/pen…

2. 1 px border

Similar to the dividing line, but using rect to draw an adaptive rectangle with 100% width and height

div {
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='none' stroke='red' /></svg>");
}
Copy the code

Results the following

Codepen. IO/xboxyan/pen…

3. 1px rounded border

Rounded corners can be easily implemented in SVG with the help of the RX attribute, as well as specifying the border-radius of the element itself

div {
  border-radius:5px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' rx='5' fill='none' stroke='red' /></svg>");
}
Copy the code

Results the following

Codepen. IO/xboxyan/pen…

conclusion

Here are some tips for implementing SVG borders. Using background-image simulation, it is much more convenient than using fake elements, and it does not take up space, which is a relatively perfect solution