SVG as border-image on retina?

Question

css

1. Let's take a simple SVG with a rounded square, whose rounding radius is set to 10:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <rect fill="#FACE8D" x="0" y="0" width="100" height="100" rx="10" ry="10" />
</svg>

Here's what it looks like:



2. Use the resulting vector as the property value border-imagein CSS:

.box {
  @include border-image(url('rounded-rectangle.svg') 10);
  border-width: 10px;
  background: #FFF;
  width: 50px;
  height: 50px;
}

3. We look at what happened in different browsers and on different devices: wonderfully, the picture has spread along the borders of the block, as expected.

However, when it comes to retina devices, it sucks — SVGs seem to have doubled in size. We see only one, doubled angle.

If you replace SVG with a similar PNG, everything is fine. In general, take a look for yourself (iOS 5.1 for some reason painted over the block inside with the color of the picture, but this does not apply to the subject of the question):



Demo on CSSDeck

4. Question: is it possible to win? Maybe I have some wrong SVG? Perhaps you need to somehow cunningly set up the viewport in the meta tags so that such scaling does not happen?

The issue is quite important. First, SVG owes its modern popularity to the retina, as it allows you to decorate elements without worrying that they will look ugly on double pixels.

Secondly, the operation and syntax of the property border-imageis in many ways similar to the proprietary property -webkit-mask-box-image, which is still the only way in Webkit to cut off the rounded corners of blocks with absolutely positioned children (for example, third Google maps cannot be rounded otherwise in Chrome and Safari). In addition, this property is invaluable when developing applications for iOS / Android using a web component, when you need to set a tricky outline for some interface element. However, like border-image, on retinas it also "doubles" its SVG.

Additional materials

• Поддержка браузерами свойства border-image
• Поддержка браузерами SVG

Answer 1

And if you encode svg in base64?