Википедия:SVG помощь

SVG-помощь

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

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

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

Ниже приведен список распространенных векторных редакторов и предлагаемых настроек для совместимости. Руководство пользователя выбранной вами программы также может оказаться полезным при устранении неполадок.

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

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

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

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

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

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

• Измените все шрифты на шрифты, поддерживаемые Википедией, как упоминалось ранее. (Например, измените «Sans embedded» на «DejaVu Sans».)
• Добавьте «px» ко всем ссылкам на размер шрифта. (Например, измените «font-size:100» на «font-size:100px».)
• Удалите все дополнительные ссылки на координаты 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, похоже, не работает).

Примечание: Толщину линий векторной графики также может потребоваться явно задать в OpenOffice.org Draw.

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

Проще всего сохранять целые слайды из Powerpoint как svg, чем сохранять множественно выбранные объекты с помощью правой кнопки мыши / сохранить как изображение, потому что для целых слайдов границы будут обрезаны до размера слайда, а фон будет установлен белым. Чтобы сохранить слайды как svg, используйте Файл / Сохранить как / Обзор / Тип файла --> svg.

Если на вашем слайде есть текст, откройте экспортированный svg в Блокноте и замените все существующие спецификации семейств шрифтов на font-family="Liberation Sans,sans-serif". Эта спецификация заставит Wikimedia отображать шрифты SVG аналогично тому, как браузеры отображают шрифты Wikipedia.

Текст также может быть порезан при экспорте, что приводит к ошибкам рендеринга и локализации. Чтобы исправить это, найдите все </text>теги и убедитесь, что тег не встроен в другой текстовый тег, который находится в той же строке текста. Большинство встроенных текстовых тегов можно просто удалить; однако, если содержимое необходимо подписать или подписать, замените текстовый тег спецификацией tspan. Для подстрочных индексов используйте <tspan font-size="smaller" baseline-shift="sub">. Для надстрочных индексов используйте <tspan font-size="smaller" baseline-shift="super">.

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

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

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

Нажмите КАК для получения подробного объяснения.

Нажмите ЗДЕСЬ (или ЗДЕСЬ), чтобы загрузить электронные таблицы.

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

1. Потепление полос — принимает один набор данных и преобразует в код SVG, отображающий графику потепления полос Эда Хокинса . Пользователь выбирает вертикальные или горизонтальные полосы; нормальный или обратный порядок данных; или из множества геометрических фигур (обновлено 17 мая 2023 г.). . . . . Нажмите здесь, чтобы увидеть примеры потепления полос, встроенных в различные фигуры.
2. Потепление полос столбчатой ​​диаграммы — принимает один набор данных и создает обычную столбчатую диаграмму, отдельные столбцы/столбцы которой окрашены в соответствии с цветовой схемой потепления полос доктора Хокинса. Альтернативный вариант: выберите один цвет для восходящих полос и другой цвет для нисходящих полос. (обновлено 28 августа 2023 г.)
3. Линейные диаграммы — принимают до шести наборов данных. (обновлено 30 августа 2023 г.)
4. Вертикальные столбчатые диаграммы (столбчатые диаграммы) — принимает до шести наборов данных. Переключайтесь между кластеризованными и штабелированными диаграммами; пользователь может настроить «Yfloor» — уровень Y (обычно = 0), от которого столбцы поднимаются или опускаются; пользователь выбирает, сохранять или игнорировать отрицательные входные значения. (обновлено 27 августа 2023 г.)
5. Горизонтальные столбчатые диаграммы — Принимает до шести наборов данных. Переключение между кластеризованными и штабелированными диаграммами; пользователь может настроить «Yfloor» — значение (обычно = 0), от которого отходят столбцы; пользователь выбирает, сохранять или игнорировать отрицательные входные значения. (обновлено 27 августа 2023 г.)
6. Диаграммы рассеяния — принимают до пяти наборов данных. (обновлено 28 августа 2023 г.)
7. Круговые диаграммы — принимают один набор данных, содержащий до 36 элементов. (обновлено 17 мая 2023 г.)
8. Столбчатые диаграммы переменной ширины — принимают до шести наборов данных; похожи на «Вертикальные столбчатые диаграммы» выше, но пользователь может выбирать разную ширину для разных столбцов. (обновлено 27 августа 2023 г.)

Преобразование текста в файле SVG в пути (фигуры) увеличивает размер файла, препятствует функциям локализации/доступности и усложняет редактирование/изменение в дальнейшем. Поэтому обычно это не приветствуется, за некоторыми исключениями, такими как текстовые логотипы. Текстовый рендерер Wikimedia может вносить ошибки, поскольку его шрифты могут отличаться от шрифтов браузера или шрифтов редактора SVG, но следование приведенным ниже рекомендациям должно минимизировать эти ошибки.

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

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

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

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

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

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

Размер шрифта, отображаемый в миниатюре, представляет собой комбинацию ширины svg, ширины миниатюры и размера шрифта. Чтобы соответствовать размеру шрифта Википедии в качестве миниатюры, используйте font-size = (63/(ваше вертикальное значение))*((ваша ширина svg)/1000). Например, если миниатюра будет масштабироваться до thumb upright=1,35, а ваше изображение имеет ширину svg 960, установите font-size в svg на (63/1,35)*(960/1000) = 44,8.

Прозрачный фон хорош, но не думайте, что ваше изображение всегда будет отображаться на светлом или белом фоне. Например, приложение wikipedia для смартфонов отображает изображения на черном фоне, поэтому если вы покажете черный текст на прозрачном фоне, он будет невидим.

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

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

Ни один из этих чекеров не является абсолютно надежным, поэтому разумно проверять изображения. Вы можете предварительно проверять изображения, загружая их в общее временное местоположение Test.svg, хотя другие пользователи могут перезаписать ваше изображение в любое время.

Для принудительного обновления изображений в браузере используйте сочетание клавиш Ctrl+F5 (Shift-Reload на Mac), чтобы увидеть последнюю загруженную копию, а не кэшированные копии изображений (это необходимо даже на страницах загрузки Wikimedia).

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

Чтобы обойти эти недостатки в библиотеке, есть определенные параметры, которые необходимо отформатировать определенным образом или назначить обходное значение, чтобы librsvg правильно отображал виды вашего файла SVG. Некоторые проблемы перечислены ниже, но обязательно проверьте свои файлы SVG до и после их загрузки.

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

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

xlink:hrefбыл объявлен устаревшим и заменен на hrefв SVG 2, выпущенном в 2018 году. Между 2023 и 2024 годами рендерер SVG Wikimedia был обновлен, чтобы следовать примеру, поэтому xlink:hrefбольше не работает. Вместо этого hrefтеперь следует использовать .

http://w3.org/TR/css-syntax-3 гласит: «Имена свойств и имена правил всегда являются идентификаторами, которые должны начинаться с буквы или дефиса...»

К сожалению, в последней версии инструмента создания миниатюр (называемой rsvg ) есть ошибка, из-за которой текстовые теги, выровненные по центру или по правому краю и содержащие теги tspan, на одной строке выравниваются неправильно.

Пока разработчики работают над решением, вот несколько способов снижения полезности:

1. Выровняйте затронутые textтеги по левому краю с помощьюtext-anchor="start"
2. Укажите атрибут yили dyдля затронутых tspanтегов
3. При использовании нескольких tspanтегов в строке для:
   • Интервал между словами и символами, используйте:
     1.  (неразрывный пробел),  (тонкий пробел) и/или  (тонкий пробел) символы
     2. атрибутletter-spacing​
     3. моноширинный шрифт, такой как Liberation Mono(последнее средство)
   • нижние или верхние индексы, используйте нижние и верхние индексы Unicode
   • выделение жирным шрифтом или курсивом переменных и т. д. в математике, используйте математические буквенно-цифровые символы Unicode
4. Объединить затронутые tspanтеги, даже унитализированные переменные и т. д., если указанные выше методы не срабатывают
5. Преобразовать текст в фигуры (последняя мера, поскольку текст больше не может быть изменен, скопирован или прочитан программами чтения с экрана)

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

Когда растровая графика встраивается в SVG, она кодируется в данные base64 . Затем этим данным назначается тип MIME в элементе <image>. В случае встраиваемого JPEG тип MIME — «image/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 игнорирует такие изображения.

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