1. Возьмём простой SVG со скруглённым квадратом, радиус скругления у которого выставлен на 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>
Вот как это выглядит:
2. Используем получившийся вектор в качестве значения свойства
border-image в CSS:
.box {
@include border-image(url('rounded-rectangle.svg') 10);
border-width: 10px;
background: #FFF;
width: 50px;
height: 50px;
}
3. Смотрим, что получилось в разных браузерах и на разных устройствах: чудесно, картинка расползлась по границам блока, как и ожидалось.
Однако, когда дело доходит до устройств с ретиной, получаем полный отстой — SVG будто стали вдвое больше. Мы видим только один, увеличенный вдвое угол.
Если подменить SVG аналогичным PNG, всё хорошо. В общем, сами взгляните (iOS 5.1 ещё зачем-то закрасил блок внутри цветом картинки, но это не относится к предмету вопроса):
Демонстрация на CSSDeck
4. Вопрос: возможно ли это победить? Может быть, у меня какой-то неправильный SVG? Возможно, нужно как-то хитро настроить viewport в мета-тегах, чтобы подобное масштабирование не происходило?
Проблема довольно важна. Во-первых, SVG обязан своей современной популярностью как раз ретине, так как позволяет украшать элементы, не беспокоясь, что они будут выглядеть безобразно на двойных пикселях.
Во-вторых, работа и синтаксис свойства
border-image во многом аналогичны проприетарному свойству
-webkit-mask-box-image, который по-прежнему является единственным способом в Вебките обрезать скругленные уголки у блоков с абсолютно позиционированными детьми (например, третьи гуглокарты иначе в Хромах и Сафарях не скруглишь). Кроме того, это свойство бесценно при разработке приложений под iOS/Android с использованием веб-компонента, когда нужно задать хитрый контур какому-то элементу интерфейса. Однако, подобно
border-image, на ретинах оно тоже «удваивает» свою SVG.
