Почему svg картинки на iOS выглядят размыто?

Question

[yapaofficial]

Картинки svg очень размыты на телефонах с iOS а на других девайсах выглядят прекрасно
Вот пример как они выглядят на айфоне

Comments

[pantsarny]

Прикрепили бы исходник …

[Dmitriy]

хм, а это точно svg или там base64 внутри?

Answer 1

[psiklop]

Не знаю, но недавно личным опытом узнал, что safari не умеет масштабировать через background-size в формате svg

Comments

[Ankhena]

psiklop думаю, дело в чем-то другом... В забытых размерах или неверно написанных. Или в неправильной самой svg (вьюбокс, размеры).

[psiklop]

Ankhena, я тогда решил проблему сохранив svg в png, не делая больше абсолютно ничего. Проверить не было возможности, у меня нет айфона, но мне написали теперь все ok

[Ankhena]

psiklop, то, что вы написали, вряд ли можно считать ответом, да ещё и при таких пруфах.

[psiklop]

Ankhena, вообще даже не претендую на ответ. Можете удалить, если мешает. Сейчас сделаю пруф, если получится.

[Ankhena]

psiklop, да, но не ответы пишут в комментариях

[psiklop]

Ankhena, понял.

[psiklop]

Ankhena, не смог добиться как было, но получил вариант, что svg не масштабируется вообще негде

<div class='test'></div>

<style>
.test {
	width: 200px;
	height: 200px;
	background: url(rect.svg) no-repeat;
	background-size: 100% 100%;
}
</style>

А при замене на png без проблем

[Ankhena]

psiklop, вот сюда, пожалуйста: codepen.io
И саму svg.

Но предварительно и на всякий случай css.yoksel.ru/svg-sizes/#preserveAspectRatio

[psiklop]

Ankhena, вот пропорции svg держит, не хочет масштабироваться
https://codepen.io/psiklop/pen/MWqWMjd

[psiklop]

Ankhena, ok спасибо, но не мое, целая статья про svg, проще в png сохранить.
P.S. хотя прочитал, работает, отредактировал preserveAspectRatio

[Ankhena]

psiklop,

отредактировал preserveAspectRatio

Да именно так.

проще в png сохранить

Одна всегда четкая svg против по крайней мере двух png.

Но да, бывают ситуации, когда png может выиграть, даже в двойном комплекте. Типа размазанных фонов. Но не всегда.

[psiklop]

Ankhena, работает preserveAspectRatio 100%, немного запутался, супер, пошел переделывать.

[Ankhena]

psiklop, preserveAspectRatio="none"