SVG-изображение выглядит странно на HTML-странице

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

Спасибо, Алекс

Ответы (2)

Ваш шрифт был заменен.

Сравните каждый символ, и вы увидите небольшие различия. Браузер отвечает за отображение файла SVG. Если у него нет доступа к шрифту или если он не понимает спецификацию шрифта, он вернется к резервному варианту.

Решение состоит в том, чтобы преобразовать текст в пути с Ctrl+ Shift+ C. Это сделает ваш текст недоступным для редактирования, но он будет отображаться правильно.

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

К сожалению, это сведет на нет некоторые преимущества использования SVG, такие как размер файла, тексты, которые можно искать, которые можно автоматически переводить, которые можно сделать слышимыми с помощью инструментов или иным образом преобразовать с помощью устройств для слепых. Другие преимущества заключаются в том, что исправления легче в тексте как в тексте. Сохранение резервной копии перед преобразованием имеет и другие недостатки, такие как больше места для хранения, управление двумя файлами вместо одного, определение рабочего процесса...
О, прочитав еще раз, я вижу, что просмотрел слой с сохранением текста невидимо. Я думаю, в цвете фона или в слое ниже фонового слоя?
@userunknown Вы правы насчет преимуществ/недостатков. Насколько мне известно, нет способа добиться последовательного рендеринга текста в SVG, созданном Inkscape, если у пользователя нет этого шрифта в их системе, поэтому я обычно просто меняю текст на пути. Независимо от того, лучший это метод или нет, он, по крайней мере, работает без головной боли. См. раздел Встраивание шрифтов в Inkscape .
Я согласен и желаю, чтобы в браузерах был лучший рендеринг. Может быть, открыть эталонные шрифты, которые можно использовать через Интернет или один раз загрузить на локальную платформу — если вам нравится или нужно использовать что-то еще, вы все равно можете это сделать. Надежды, фантазии...

Во-первых, внешний вид файла SVG зависит от того, как его отображает текущее программное обеспечение. Это означает, что Explorer может отображать его иначе, чем Chrome, а FireFox будет отображать его немного по-другому... В любом случае, если вы хотите использовать файл svg в другом программном обеспечении, кроме Inkscape, сохраните его как PLAIN svg (а не Inkscape svg)

На самом деле использование простого SVG не должно иметь значения . Разница между обычным SVG и Inkscape SVG заключается в том, что в версии Inkscape хранится некоторая дополнительная информация о пространстве имен (которая является абсолютно допустимой SVG и должна быть приемлемой для любого средства визуализации SVG — она будет просто проигнорирована).
1. Прежде всего - конвертировать текст в путь это не решение для WEB. Текст в сети должен быть проиндексирован! 2. Правильно, использование простого SVG НЕ ДОЛЖНО иметь никакого значения, но по моему опыту - иногда имеет (иначе я бы не упоминал об этом).
Сохранение исходного текста в другом слое, как я предлагаю, сохраняет исходный текст в файле (при условии, что поисковые системы действительно индексируют содержимое в файлах SVG), что будет адресовать #1. Для # 2 я хотел бы увидеть пример (это серьезный, а не язвительный запрос). Я использую Inkscape в течение многих лет и никогда не находил преимуществ в использовании простого SVG.
Почему «предполагая» (в «предполагая, что поисковые системы действительно индексируют...»)? Пример из моего повседневного рабочего процесса — когда я импортирую inkscape svg в блендер — это должен быть простой svg.
И почему вы так не согласны с моим ответом? svg - это язык разметки, как и html - конечно, каждый браузер будет отображать его по-своему, html-страницы не совсем одинаковы в разных браузерах, это не значит, что вы будете запекать их в изображения. .
Преобразование текста в пути в SVG не эквивалентно превращению веб-страницы в изображение. Если на сайте заменить шрифт, в большинстве случаев ничего страшного не произойдет. Разделы могут расширяться, страница может становиться длиннее и т. д., но это должно быть удобно для использования. Однако, если ваш шрифт заменяется в SVG, он может ПОЛНОСТЬЮ изменить его, поскольку размер текста может измениться, а пути - нет, что, по-видимому, является проблемой в этом вопросе. Ваш ответ не решит эту проблему, поэтому я не согласился. (К вашему сведению, я не минусовал)
Кстати, скрытие редактируемого текста в svg ОЧЕНЬ НЕПРАВИЛЬНО - это может быть воспринято Google как черный SEO и заставит вас забанить. Не упоминайте, что это просто очень непрофессиональный обходной путь. Это как запекать изображение с текстом и помещать текст в тег "alt",,,
«Преобразование текста в пути в SVG не эквивалентно превращению веб-страницы в изображение. Если на веб-сайте заменить шрифт, по большей части ничего страшного не произойдет» — ничего ПЛОХОГО, ОК, но текст не текст больше... в наши дни это очень важно. И самое главное, вы МОЖЕТЕ встроить @font-face в свой документ svg!
SVG-изображение выглядит странно на HTML-странице
СпросиСетьПолитика конфиденциальности1y, 0v