PerfectVector
Автор: Irene Kim6 мин чтения

SVG-маркеры QGIS: символы с изменяемыми цветами

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

На этой странице

Чтобы подготовить пользовательский SVG-маркер QGIS с изменяемыми цветами, добавьте подстановки QGIS param() к атрибутам оформления, которыми должно управлять приложение. Для областей с постоянным цветом оставьте явные значения. Руководство QGIS 3.44 по выбору символов описывает подстановки для заливки, обводки, их непрозрачности и ширины обводки.

Начните с небольшого чистого символа. Иконка, убедительная в размере иллюстрации, может потерять отверстие, акцент или обводку при использовании как маркер карты.

Границы этого руководства: мы отрендерили обычный оригинал SVG в браузере и проверили XML параметризованной копии. Мы не импортировали копию в QGIS. Синтаксис параметров ниже следует документации 3.44; проверки в целевом приложении должны завершить вы или получатель GIS-файла.

Сохраните обычный оригинал и копию для QGIS

Используйте два файла с одинаковой геометрией:

ФайлНазначение
marker-master.svgОбычное оформление SVG для редактирования и проверки в браузере.
marker-qgis.svgКопия для целевого приложения с подстановками параметров QGIS в выбранных атрибутах.

Такое разделение позволяет легко проверять исходную графику. Предпросмотр обычного оригинала в браузере подтверждает его отображение в браузере. Он не доказывает, что копия QGIS импортирована правильно или что ее элементы управления работают как задумано.

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

Оригинальная исходная графика
Отображение обычного зеленого SVG-маркера с прозрачным отверстием и фиксированным золотым акцентом в браузере, включая предпросмотры 24, 32 и 48 пикселей
Обычный оригинал SVG, отрендеренный в браузере. Шахматный фон виден сквозь отверстие; это не импорт QGIS и не проверка параметров цвета.

Создайте настоящее отверстие в исходнике

Сохраните код как marker-master.svg:

<svg xmlns="http://www.w3.org/2000/svg"
     width="64" height="64" viewBox="0 0 64 64">
  <path id="body" fill="#237466" fill-opacity="1"
        stroke="#173f37" stroke-opacity="1" stroke-width="2"
        fill-rule="evenodd"
        d="M32 5C19 5 10 14 10 27C10 42 32 59 32 59S54 42 54 27C54 14 45 5 32 5Z M32 17A10 10 0 1 0 32 37A10 10 0 1 0 32 17Z"/>
  <path id="accent" fill="#f2c96c" stroke="none"
        d="M32 41L36 46L32 51L28 46Z"/>
</svg>

Основной контур включает внешнюю границу и внутренний круговой контур. В этой конструкции fill-rule="evenodd" делает внутреннюю область вырезом. Через маркер виден фон, а не белый диск, нарисованный поверх него. Справочник fill-rule MDN объясняет, как правило определяет заполненные области.

viewBox определяет исходный прямоугольник координат. Здесь это квадрат со стороной 64 единицы с пространством вокруг обводки. Сохраните одинаковую рамку в обеих копиях. Если символ выглядит неожиданно маленьким внутри рамки, проверьте геометрию и пустые поля, прежде чем увеличивать отображаемый размер.

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

Параметризуйте основную часть и оставьте акцент фиксированным

Создайте копию marker-qgis.svg. У контура с id="body" замените пять атрибутов оформления следующим блоком:

fill="param(fill) #237466"
fill-opacity="param(fill-opacity) 1"
stroke="param(outline) #173f37"
stroke-opacity="param(outline-opacity) 1"
stroke-width="param(outline-width) 2"

Оставьте данные контура и fill-rule без изменений. Сохраните у контура accent значения fill="#f2c96c" и stroke="none".

Атрибут SVGПодстановка QGISПредполагаемое управление
fillparam(fill)Цвет заливки основной части
fill-opacityparam(fill-opacity)Непрозрачность заливки основной части
strokeparam(outline)Цвет обводки основной части
stroke-opacityparam(outline-opacity)Непрозрачность обводки основной части
stroke-widthparam(outline-width)Ширина обводки основной части

Значения после подстановок — необязательные значения по умолчанию в синтаксисе QGIS. Они не обещают, что обычный просмотрщик SVG поймет параметризованное значение оформления. Для общего редактирования и предпросмотра SVG используйте обычный оригинал.

Не заменяйте каждый цвет на param(fill) автоматически. В этом дизайне так потерялось бы решение оставить золотой акцент отдельным. Применяйте общую подстановку только к областям, которые должны реагировать на один элемент управления.

Проверьте копию для приложения перед передачей

Наша проверка XML подтвердила одинаковый viewBox и идентичные данные контуров у обоих файлов. Копия QGIS содержит пять нужных подстановок у body; accent сохраняет фиксированную золотую заливку. В примере нет элементов <image>, внешних файлов или шрифтов.

Для своего маркера проверьте:

  • Исходник содержит ожидаемые векторные фигуры. Изменение атрибута оформления не перекрашивает пиксели встроенного изображения как отдельные области.
  • Параметры получают только нужные контуры. Оставьте декоративные акценты заданными явно.
  • В другом месте файла объявление стиля не сохраняет конфликтующее фиксированное значение оформления.
  • Вырез остается настоящим отверстием на контрастном фоне.
  • Маркер имеет достаточно места для обводки без большой пустой рамки.

Успешный разбор XML проверяет синтаксис. Он не удостоверяет поддержку каждой возможности SVG целевым рендерером. Сохраняйте исходник простым и завершите проверки в приложении.

Проверьте маркер в проекте QGIS получателя

В окне выбора точечного символа выберите слой символа SVG marker и загрузите копию для приложения. Указанное выше руководство QGIS конкретной версии описывает этот тип символа и доступные настройки.

Перед использованием символа на всей карте попросите получателя отдельно проверить заливку основной части, обводку и непрозрачность; убедиться, что золотой акцент остается фиксированным; осмотреть отверстие в предполагаемом размере маркера; и снова открыть общий проект с доступным файлом символа. Также проверьте экспортированную карту или макет: именно этот файл получит аудитория.

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

Если иконка начинается с растрового клипарта

Если пользовательская пиктограмма существует только в PNG или JPG, инструмент PerfectVector для конвертации клипарта в SVG поможет восстановить векторную графику для редактирования. Проверьте контуры, упростите детали, исчезающие в размере маркера, и отделите основную часть от фиксированного акцента до добавления параметров QGIS. Руководство по подготовке маленьких иконок описывает четкость исходника и очистку для малых размеров.

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

FAQ

Почему импортированный SVG-маркер не позволяет менять нужные цвета? Проверьте, содержат ли соответствующие атрибуты оформления подстановки параметров QGIS. В этом примере параметризована только основная часть; золотой акцент намеренно фиксирован. Затем проверьте элементы управления в целевой версии QGIS.

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

Превращает ли векторизация иконки ее в географические данные? Нет. Она создает графику символа. Местоположения, координаты и точность карты по-прежнему зависят от географических данных и процесса GIS.

Sources

  1. QGIS 3.44 — The Symbol Selector — Параметры SVG-маркеров и необязательные значения по умолчанию.
  2. MDN — fill-rule — Заполненные области и правило even-odd для отверстия.
  3. MDN — viewBox — Прямоугольник координат SVG, используемый в обеих копиях исходника.

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

Ещё из блога

Начните с более чистого SVG,
который проще редактировать