Википедия: справка по SVG

Справка по SVG

Масштабируемая векторная графика - это широко используемый формат файлов для обеспечения геометрического описания изображения с использованием основных объектов, таких как метки, круги, линии, кривые и многоугольники. Изображение может быть уменьшено или увеличено до произвольного размера, при этом данные изображения не будут потеряны, и оно не станет пиксельным. SVG - отличный формат для иллюстраций, диаграмм и рисунков. Изображения SVG определены в текстовых файлах XML. Это означает, что их можно искать, индексировать, создавать сценарии и сжимать. Поскольку это файлы XML, изображения SVG можно редактировать с помощью любого текстового редактора, но также доступны программы рисования на основе SVG.

Однако движок рендеринга, используемый wiki, несовершенен и может привести к тому, что изображение будет отображаться неправильно или иначе, чем оно отображается в выбранном вами векторном редакторе . Эта страница позволяет авторам, испытывающим проблемы с графикой SVG, получить некоторую помощь в размещении своих изображений в вики так, как они предполагают.

В чем мы можем помочь

Понимание SVG

Вопросы о формате SVG

Правильное использование SVG

Когда использовать (или не использовать) SVG

То, что вы видите, это не то, что вы получаете

Отсутствующие объекты в файлах
Случайно заполненные поля на изображении
Изображения неправильного размера
Несоответствие шрифтов
Другие странные и замечательные ошибки

Что-то новое

Вопросы, для которых вы не можете найти лучшего места

Общие проблемы

Тестирование на наличие проблем

Следующие средства проверки SVG могут помочь вам обнаружить проблемы SVG перед загрузкой:

Проверка WMF Labs SVG
Программа проверки Commons SVG
валидатор w3.org

flowRoot не появляется

изображение, содержащее SVG1.2-допустимый flowRoot

Отслеживается в Phabricator
Задача T43424
отклонена

Если появится черный ящик, прочтите c: User: JoKalliauer / RepairFlowRoot, как решить эту проблему, но не удаляйте эти объекты, поскольку они могут содержать текст. Обходные пути, которые можно использовать, - это либо не использовать плавный текст (с помощью текстового инструмента без создания текстового поля), либо преобразовать текст в обычный текст (с помощью текстового редактора или sed-comand , или с помощью Inkscape-GUI или с помощью a Inkscape-batch ), но для обводки текста с помощью «от объекта к пути», поскольку текст пути не рекомендуется и увеличивает размер файла.

проблемы с семейством шрифтов

Гусеничный в Phabricator
задач T180923

Резервные шрифты

Из-за ограничений авторского права MediaWiki не может использовать проприетарные шрифты, которые обычно встречаются в некоторых проприетарных операционных системах. Для распространения таких шрифтов, как Geneva, требуется лицензионная плата. rsvg не сможет найти такие шрифты, и текст не будет отображаться в визуализированном изображении. Есть три решения этой проблемы:

Можно заменить шрифт, который есть в Википедии . Такой подход облегчает редактирование.
Можно указать универсальный font-familyшрифт, такой как «без засечек», «засечек» или «моноширинный», но это может привести к несогласованному отображению. Лучше указать шрифт, доступный в Википедии (например, Liberation Sans), с резервными шрифтами, такими как:, font-family="Liberation Sans,Arial,Helvetica,sans-serif"в котором вы определяете список шрифтов с похожими шрифтами, которые содержат по крайней мере один шрифт для каждой операционной системы, такой как Wikimedia (например, Liberation Sans), Windows (например, Arial), Linux (например, Liberation Sans), Mac (например, Helvetica).
Поскольку локальный рендеринг должен быть как можно ближе к Википедии, он должен использовать локально тот же шрифт, что и в Википедии, если он доступен. Поэтому всегда сначала определяйте шрифт Викимедиа. Кроме того, в Викимедиа есть синонимы для замены шрифтов, такие как «Arial» вместо «Liberation Sans»; следовательно, font-family="Arial,DejaVu Sans"будет обработан "Liberation Sans", а не (как ожидалось) "DejaVu Sans". (Это связано с тем, что «Liberation Sans» имеет тот же размер букв, что и «Arial» [совместимый с метрикой], поэтому вероятность нарушения потока текста меньше.)
Преобразование текста в пути увеличивает размер файла и поэтому обычно не рекомендуется (за исключением текстовых логотипов и т. Д.).
Сгруппируйте текст, создайте копию и преобразуйте копию в пути. Тогда либо:
1. переместите исходный редактируемый текст без контура в отдельный редактируемый текстовый слой, который вы делаете прозрачным (предупреждение: это может быть удалено оптимизаторами SVG) или
2. переместить исходный редактируемый текст без пути за пределы видимой области (пример: File: Essigsäuresynthesen.svg ).

Для облегчения последующего редактирования и значительно меньшего размера файлов рекомендуется заменить шрифт доступным шрифтом. У многих распространенных шрифтов есть альтернативы, не являющиеся собственниками, которые похожи по типографскому стилю, что приводит к минимальному нарушению существующих изображений во время замены. Список шрифтов, доступных в Википедии, см. В разделе « Доступные шрифты на Meta».

Викимедиа использует шрифты по умолчанию и будет использовать Liberation Serif для Times New Roman и Liberation Sans для Arial . Для получения дополнительных сведений см. C: Help: SVG # fallback .

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

плохое выравнивание букв на маленьком шрифте

Отслеживается в Phabricator
Задача T36947
Открыть

phab: T36947

Librsvg неточно вычисляет расстояния между буквами для шрифтов размером 20 пикселей и ниже.

Для текста вроде

<svg  viewBox = "0 0 100 100"  xmlns = "http://www.w3.org/2000/svg" >  <text  x = "20"  y = "30"  font-size = "5px" > exampletext < / текст> </svg>

вы можете заменить его:

<svg  viewBox = "0 0 1000 1000"  xmlns = "http://www.w3.org/2000/svg" >  <text  x = "200"  y = "300"  font-size = "50px" > exampletext < / текст> </svg>

или с

<svg  viewBox = "0 0 100 100"  xmlns = "http://www.w3.org/2000/svg" >  <g  transform = "scale (0.1)" > <text  x = "200"  y = "300 "  font-size = " 50px " > пример текста </text> </g> </svg>

Отсутствуют встроенные изображения JPEG

Гусеничный в Phabricator
Task T193929
утратившими

Нормальное изображение

Сломанное изображение

Когда растровая графика встроена в SVG, она кодируется в данные base64 . Затем этим данным присваивается MIME-тип в элементе <image>. В случае встроенного JPEG типом MIME является «изображение / JPEG». Старые версии Inkscape(и, возможно, другие редакторы) присвоили тип MIME «image / jpg». В то время как Inkscape и большинство веб-браузеров прекрасно отображают такое изображение SVG, программа MediaWiki, которая растрирует файл SVG, будет иметь с ним проблемы. Не распознавая MIME-тип «image / jpg», на месте предполагаемого изображения будет просто пустое место. Чтобы исправить это, откройте файл SVG в текстовом редакторе, найдите элемент <image>, найдите «image / jpg», измените его на «image / jpeg» и повторно сохраните. Справа - пример этой проблемы. Программа Commons SVG Checker ищет эту проблему; подробности см. в Commons: Commons: Commons SVG Checker / KnownBugs # Checks .

Хотя веб-браузеры справляются с тегами изображений без указания ширины и высоты , librsvg игнорирует такие изображения.

дуговые флаги

Отслеживается в Phabricator
Задача T217990
Открыть

phab: T217990

Если сегменты круга искажены, это часто происходит из-за уменьшения промежутков между дугой и флагами, подробности см. В phab: T217990 .

Дальнейшие вопросы

Дополнительные проблемы можно найти в c: Librsvg_bugs или в Commons: Commons: Commons SVG Checker / KnownBugs , а примеры можно найти в c: Category: Pictures_demonstrating_a_librsvg_bug . Однако большинство проблем (для файлов размером <1 МБ) можно исправить с помощью https://svgworkaroundbot.toolforge.org/ (включите «запустить svgcleaner» и включите «запустить поиск» перед нажатием кнопки «преобразовать»), для более подробного просмотра списка проверьте c: Пользователь: SVGWorkaroundBot .

Визуализация файлов

MediaWiki (программа, из которой запускается Википедия) использует librsvg -library для растеризации всех своих файлов svg. Версия программы rsvg, установленная на вики, не всегда правильно растрирует SVG-файлы Inkscape или OpenOffice.org и не распознает некоторые форматы в SVG-файлах текстовых редакторов. Файловый менеджер GNOME Files или c: Commons: Commons_SVG_Checker полагается на librsvg, поэтому его можно использовать для проверки качества перед загрузкой SVG.

Визуализация файлов Inkscape

Существует простое решение проблемы нехватки librsvg. Операция «Обводка по контуру», которую можно найти в меню «Меню»> «Путь» в Inkscape или через Ctrl+ Alt+ C, может быть применена ко всем объектам, которые не отображаются правильно. Чтобы файлы SVG оставались редактируемыми, это следует делать только с файлами, предназначенными для загрузки, и эти файлы могут быть впоследствии удалены.

По состоянию на февраль 2014 г. к объектам, которые необходимо изменить для правильного отображения с помощью librsvg, относятся:

Линии со стрелками (стрелки нужно преобразовать)
Текст, который был преобразован, например «Текст по контуру»
Составные объекты, созданные с помощью инструментов двоичного пути (объединение, пересечение и т. Д.)

Визуализация файлов OpenOffice.org SVG

Файлы OpenOffice.org SVG могут потребовать ручной модификации перед загрузкой в Википедию. Для достижения этой цели:

Измените все шрифты на шрифты, поддерживаемые Википедией, как упоминалось ранее. (Например, замените "Sans embedded" на "DejaVu Sans".)
Добавьте «px» ко всем ссылкам на размер шрифта. (Например, измените «размер шрифта: 100» на «размер шрифта: 100 пикселей».)
Удалите все дополнительные ссылки на координату x в tspanэлементах. (Например, изменить <tspan x="17583 17917 " y="10943">на <tspan x="17583" y="10943">.)
[Не требуется для OO 2.3.0] Явно раскрасьте весь текст (например, черный), заменив соответствующие экземпляры «stroke: none; fill: none» на «stroke: none; fill: rgb (0,0,0)» (обратите внимание, что просто явное выделение текста черным цветом в OpenOffice 3.2.1, похоже, не работает).

NB: ширину линий векторной графики также может потребоваться явно указать в OpenOffice.org Draw.

Руководство по замене кода SVG (выполнение replace all с использованием регулярных выражений Nedit)

Первоначальный текст	Текст замены
Без встроенного	DejaVu Sans
`tspan x="([0-9]) ([0-9 ])"`	`tspan x="\1"`

Эта процедура экспорта SVG была протестирована с использованием OO 2.3.0 и OO 3.2.1 с простым кандидатом .odg.

Визуализация файлов SVG текстового редактора

Файлы SVG, созданные с нуля в текстовом редакторе, могут использовать любой допустимый синтаксис SVG, если ваш браузер поддерживает данную версию спецификации SVG. Однако в Википедии SVG интерпретируются библиотекой librsvg для создания превью PNG с разными размерами изображений. Эта библиотека распознает только подмножество всего допустимого синтаксиса SVG и может отображать ваш SVG без многих функций. Чтобы обойти эти недостатки в библиотеке, существуют определенные параметры, которые необходимо отформатировать определенным образом или присвоить значение обходного пути, чтобы librsvg могла точно отображать представления вашего файла SVG.

<маска> параметр maskUnits = "userSpaceOnUse"

Библиотека librsvg неправильно интерпретирует значение "userSpaceOnUse"параметра maskUnits. Чтобы обойти эту проблему, замените maskUnits="userSpaceOnUse"на maskUnits="-10% -10% 120% 120%", и маска SVG будет правильно отображаться в Википедии.

параметр stroke-dasharray

Librsvg библиотека не принимает в stroke-dasharrayпараметр со значениями , разделенных пробелами. Замените все пробелы запятыми, чтобы обойти эту проблему: например, stroke-dasharray="2 3 2 4"→stroke-dasharray="2,3,2,4"

Используйте xlink: href = , а не только href = , в `<use ___/>`инструкциях

В проектах Викимедиа <use xlink: href = "# myobjectname" transform = "translate (10 10)" /> будет отображаться правильно, если вы указали xmlns: xlink = "http://www.w3.org/1999/xlink. . Имейте в виду, что href = сам по себе не будет работать в проектах Викимедиа, даже если он может отображаться правильно при прямом чтении вашим браузером.

Общая концепция выше; примеры ниже.

Утепляющие полоски (композит)

Гистограмма с полосами потепления

Гистограмма (вертикальная)

Круговая диаграмма

}}

Графики

Диаграмма рассеяния

Я загрузил электронные таблицы .xlsx (Microsoft Excel), которые автоматически генерируют XML-код для диаграмм в формате SVG.

Вы просто вставляете свои данные XY в электронную таблицу и указываете размеры изображения, количество линий сетки, размеры шрифта и т. Д. Электронная таблица мгновенно и автоматически генерирует столбец XML-кода, который вы просто копируете и вставляете в текстовый редактор и сохраняете как Файл ".svg". Он создает компактный код SVG, избегая «лишних вещей», которые вставляет Inkscape, и должен сэкономить ваше время.

Отзывы и предложения на моей странице обсуждения приветствуются. RCraig09 ( разговор ) 23:41, 19 февраля 2021 (UTC)

Щелкните КАК, чтобы получить подробное объяснение.

Согревающие полосы (загрузить версию 3.8) создают XML-код для приложений с изображениемсогревающих полосокЭда Хокинса . Пользователь выбирает вертикальные или горизонтальные полосы; нормальный или обратный порядок данных; или из множества геометрических фигур (обновлено 3 июня 2021 г.).

Щелкните здесь, чтобы увидеть примеры согревающих полосок различной формы.

Гистограмма с теплыми полосами (загрузить версию 1.0) Создает столбчатую диаграмму, отдельные столбцы / столбцы которой окрашены в цветовую схему с теплыми полосами доктора Хокинса. Альтернативный вариант: выберите один цвет для восходящих столбцов и другой цвет для нисходящих столбцов. Только один набор данных (обновлен 22 августа 2021 г.).
Линейные диаграммы (загрузить версию 2.2) - принимает до пяти наборов данных для линейных диаграмм (пример справа) (обновлено 12 июня 2021 г.).
Вертикальные гистограммы (гистограммы) (скачать v1.1) - Принимает до шести наборов данных дляВЕРТИКАЛИгистограмм (КОЛОНКАCHARTS) -toggle между сгруппированными и сложенными диаграммами; пользователь может настроить «Yfloor» - уровень Y (обычно = 0), от которого столбцы поднимаются или опускаются; пользователь выбирает сохранять или игнорировать отрицательные входные значения (пример справа) (обновлено 30 апреля 2021 г.).
Горизонтальные гистограммы (загрузить версию 1.0) - принимает до шести наборов данных дляГОРИЗОНТАЛЬНЫХГРАФИЧЕСКИХ ГРАФИКОВ - переключение между кластеризованными и составными диаграммами; пользователь может настроить «Yfloor» - значение (обычно = 0), от которого отходят полосы; пользователь выбирает сохранять или игнорировать отрицательные входные значения (обновлено 9 июня 2021 г.).
Диаграммы рассеяния (загрузить версию 1.0) - принимает до пяти наборов данных для ГРАФИКОВ РАССЕЯНИЯ (обновлено 14 июня 2021 г.).
Круговые диаграммы (загрузить версию 1.0) - принимает до 36 элементов для круговых диаграмм (обновлено 25 марта 2021 г.).

См. Примеры в Категория: диаграммы SVG, созданные с помощью электронной таблицы .

Помощь

Если у вас есть сложный файл SVG с не описанной проблемой или вы не можете понять, о чем говорилось в предыдущем разделе, вы можете просто попросить о помощи, разместив ниже небольшую заметку, в которой описывается проблема, а также ссылки. к файлам, в которых обнаружены эти проблемы. Не забудьте подписать свое имя четырьмя символами тильды (~~~~), и редактор попытается ответить здесь, чтобы помочь!

Когда вы будете довольны тем, что запрос был выполнен, просто оставьте заметку, чтобы запрос можно было заархивировать позже, если это необходимо.

Альтернативный источник помощи - Commons: Graphics village pump .

Архивы

1: апрель 2008 г. - июль 2008 г.
2: июль 2008 г. - февраль 2009 г.
3: февраль 2009 г. - май 2010 г.
4: май 2010 г. - ноябрь 2010 г.
5: февраль 2011 г. - январь 2013 г.
6: январь 2013 г. - сентябрь 2017 г.
7: октябрь 2017 г. - февраль 2020 г.
8 : Февраль 2020 - настоящее время

Создать новый запрос

вектор отображается полностью прозрачным

Пытаюсь загрузить вектор в общий доступ, но он продолжает отображаться как прозрачный. Когда я использую Inkscape и просматриваю файл перед загрузкой, появляется логотип. Есть ли причина для этого?

Ссылка: c: Файл: State_farm_arena.svg Troutfarm27 (Обсуждение) 07:09, 16 июля 2021 г. (UTC)

Возможно, это mask="url(#mask-2)"атрибуты, которые встречаются в <path />тегах шесть раз - я не могу найти, где они mask-2определены. Вы пробовали поместить изображение через c: COM: Commons SVG Checker ? - Red rose64 🌹 ( разговор ) 07:58, 16 июля 2021 (UTC)

@ Redrose64 : Я пропустил его через средство проверки SVG, и хотя он там не отображается, он отображается, когда я нажимаю кнопку «Исходный файл» в общем доступе . Я также не знаю, как решить эту проблему, так как я просто взял ее прямо с сайта арены. Troutfarm27 (Обсуждение) 03:14, 17 июля 2021 (UTC)

Обновление: мне удалось решить проблему. Я повторно загрузил логотип в c: File: State_farm_arena_logo.svg . Спасибо, что указали на это, Redrose64! Troutfarm27 (Обсуждение) 09:46, 21 июля 2021 (UTC)

Решено

Ошибка сервера rsvg "Слишком много запросов"

Использование троичных чисел для балансировки неизвестного целого веса от 1 до 40 кг с грузами 1, 3, 9 и 27 кг

Я снова получаю сообщение об ошибке «Ошибка: 429, слишком много запросов в четверг, 12 августа 2021 года, 21:04:17 по Гринвичу» с этим SVG. Изображение в File: fewest_weights_balance_puzzle.svg в порядке. Это из-за фильтров SVG? Спасибо, cmɢʟee ⎆ τaʟκ 21:06, 12 августа 2021 г. (UTC)

Где отображается это сообщение об ошибке? - Red rose64 🌹 ( обсуждение ) 22:56, 12 августа 2021 (UTC)

Это было на https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Fewest_weights_balance_puzzle.svg/200px-Fewest_weights_balance_puzzle.svg.png, но похоже, что теперь он работает, а на миниатюре справа нет более длинный пустой. В любом случае спасибо, cmɢʟee ⎆ τaʟκ 23:59, 12 августа 2021 г. (UTC)