Изображение SVG на мобильном устройстве отображается неправильно

Я только что добавил изображение SVG на свой личный сайт для логотипа, но когда я просматриваю изображение на своем мобильном устройстве, оно отображается, но в другом шрифте. Это моя проблема. Как это исправить?Изображение SVG на мобильном устройстве отображается неправильно

То, как я добавляю SVG, так же, как и обычный образ.

<img src="images/logo.svg">

У меня есть чувство, что это не правильный способ добавить SVG изображения, я также не имеют запасной вариант для браузеров, которые не поддерживают SVG, так что если кто-то может дать совет о том, как сделать это, это было бы здорово ,

Благодаря

источник

2016-07-08 J Knight

Вы всегда можете сделать снимок экрана в SVG и отредактировать его в редакторе краски, чтобы сделать его PNG – Confiqure

Да, но я бы предпочел сохранить SVG для отображения сетчатки и создать резервные копии для браузеров/устройств, которые не поддерживают изображения SVG. Я просто не знаю, как это сделать. –

См. [Это сообщение] (http://stackoverflow.com/questions/9689310/which-svg-support-detection-method-is-best), он проверяет возможности SVG. Возможно, вы можете настроить JavaScript, чтобы изменить изображение, которое он пытается отобразить, если он не может поддерживать SVG. – Confiqure

Отображение SVG изображений с использованием <img> имеет довольно хорошую поддержку браузера в настоящее время: http://caniuse.com/#feat=svg-img поэтому я лично рекомендовал бы его.

Если вам необходимо поддерживать очень старые браузеры, такие как IE8 или Android 2.3, я хотел бы использовать

document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")

проверить для обнаружения признака (источник: https://css-tricks.com/test-support-svg-img/) и использовать файл PNG затем (заменив атрибут src от <img>).

Чтобы включить пользовательский шрифт в SVG, можно включить его в <def> в SVG в:

<defs> 
    <style type="text/css"> 
    @font-face { 
     font-family: 'Gunny Rewritten'; 
     src: url('GunnyRewritten.woff'); 
    } 
    </style> 
</defs>

источник

2016-07-08 16:11:55

У вас еще есть вопрос по этой проблеме? Если нет, не стесняйтесь его принимать. :-) –

Жаль, что меня не было в выходные. Да, я все еще пытаюсь решить эту проблему. Мне интересно, проблема в том, что я использую шрифт, который не поддерживается браузером; который является «Gunny Rewritten». Это также не для шрифтов Google, поэтому я не могу вставлять его в SVG-код. Как я уже сказал, SVG отображается правильно с использованием любого настольного браузера, это просто когда я использую Google на своем iPhone 6 или Safari. –

Если шрифт нестандартен и не встроен, браузер не может его отобразить. Он может отображаться, если ваша локальная система имеет установленный шрифт, но нигде больше. Если у вас есть действующая лицензия на шрифт, вы должны вставить его. –

Изображение SVG на мобильном устройстве отображается неправильно

ответ

Смежные вопросы