Это очень странно. Я использую изображения SVG из-за небольшого размера файла, четкого рендеринга и масштабируемости (объекты оживляют совсем немного). Он отлично работает в FF, т.е. 9, Safari и iPad, но в Chrome некоторые изображения SVG отображаются очень плохо.
Есть идеи, почему это может происходить? Сами файлы SVG очень маленькие.
Вот пример svg
Так или иначе, это законная ошибка хрома. И есть исправление, сделайте svg 'large', svg файлы, которые внутренне сообщают об этом слишком мало, потому что это ошибка.
После многих исследований я наконец нашел рабочее исправление:
экспортируйте svg дважды необходимые размеры (я поэтому назвал его [email protected])
затем в css добавьте transform: scale(0.5)
Результат в Chrome будет выглядеть так же, как в Firefox.
Я столкнулся с этой ошибкой с элементом с фоном SVG. Обходной путь состоял в том, чтобы уменьшить непрозрачность на .01, т.е.:
.thing {
background: url('my-image.svg');
opacity: 0.99;
}