Почему некоторые зрители / редакторы не открывают этот SVG-файл должным образом?
Рассмотрите этот файл SVG (ссылка box.com; я не могу загрузить его здесь.)
Имеет символ "отмечено" или "отмечено-v", черный на прозрачном. Странно то, что некоторые зрители показывают это правильно, в то время как другие показывают, что он абсолютно пустой, то есть полностью прозрачный. Что касается редакторов, то и LibreOffice Draw, и Inkscape показывают пустой холст при загрузке, в то время как gimp показывает фактическую галочку (она растеризует ее, конечно).
Действительно ли что-то не так с SVG, или это вина приложений? Независимо от того, могу ли я изменить SVG так, чтобы он с большей вероятностью читался правильно?
2 ответа
Одним из ключей к пониманию файлов SVG является осознание того, что они не похожи на другие, распространенные форматы файлов изображений. Это язык разметки, более похожий на HTML и XML. Это источник вашего SVG-файла:
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M6 14a1 1 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.639 1.146l-7 10a1 1 0 0 1-.732.427A.863.863 0 0 1 6 14z"/>
</svg>
Тот path заявление ваша галочка. d= Атрибут - это инструкции, которые определяют форму галочки. Думайте об этом как о совершенно прозрачном (невидимом) куске стекла. Стекло существует... но ты его не видишь. Вы можете почувствовать это и его форму... но вы должны сделать больше, чтобы сделать это, чтобы вы могли видеть эту форму.
Здесь у вас нет атрибута инсульта. Штрих определит линию вокруг внешнего края фигуры. Мы можем определить ширину обводки (насколько толстая линия), ее цвет и другие свойства. Не сделав этого... однако... нет никакой линии вокруг нашей невидимой стеклянной формы... поэтому она остается невидимой.
У нас есть свойства заполнения (fill= а также fill-opacity=). Заливка определяет цвет и содержание поверхности вашей фигуры. Однако для свойств заполнения установлено значение context-fill а также context-fill-opacity , Контекстное заполнение является нестандартной функцией. Вероятно, он будет поддерживаться более новой версией основных браузеров (я лично тестировал ее с новейшими версиями Edge, Firefox и Chrome)... однако нет гарантии, что она будет поддерживаться программами просмотра и редактирования изображений, которые с большей вероятностью оставаться ближе к стандартам. Любое приложение, которое не поддерживает эту функцию, может просто полностью ее игнорировать.
И это твоя проблема. У вас нет удара... и в приложениях, которые не поддерживают заполнение контекстом, у вас нет заполнения. Это оставляет вас с этими невидимыми кусочками стекла. Это там... ты просто не видишь этого.
Когда я загрузил файл в Inkscape, он оказался пустым, но Control-A выбрал "все". Используя функцию обводки и заливки в Inkscape, я оставил заливку пустой и добавил цвет обводки.
/images/814853fe18af4a 0e1217824b3c01ed2764b698e8.png
Верхнее изображение имеет ширину обводки 0,265 мм, а нижнее имеет гораздо меньшее значение.