Изображения SVG

SVG (Scalable Vector Graphics) — это формат XML для задания изображений. Изображения SVG поддерживают следующие дополнительные свойства описания изображения:

:foreground foreground

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

:background background

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

:css css

css, если не nil, должно быть строкой, задающей CSS для переопределения стандартного CSS, используемого при генерации изображения.

Библиотека SVG

Если в вашей сборке Emacs есть поддержка SVG, вы можете создавать и изменять эти изображения с помощью следующих функций из библиотеки svg.el.

Функция: svg-create width height &rest args

Создает новое пустое изображение SVG с указанными размерами. args — это список аргументов, с помощью которого можно указать следующее:

:stroke-width

Стандартная ширина (в пикселях) любых созданных линий.

:stroke

Стандартный цвет обводки любых созданных линий.

Эта функция возвращает объект SVG, структуру данных Lisp, которая описывает изображение SVG, и все следующие функции работают с этой структурой. Аргумент svg в следующих функциях определяет такой объект SVG.

Функция: svg-gradient svg id type stops

Создает градиент в svg с идентификатором id. type задает тип градиента и может быть либо linear , либо radial. stops — это список пар «процент/цвет».

Следующее создаст линейный градиент, который переходит от красного в начале, к зеленому на 25% пути, к синему в конце:

(svg-gradient svg "gradient1" 'linear
              '((0 . "red") (25 . "green") (100 . "blue")))

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

Все следующие функции принимают необязательный список ключевых параметров, которые изменяют различные атрибуты от их значений по умолчанию. Допустимые атрибуты включают:

:stroke-width

Ширина (в пикселях) нарисованных линий и контуров вокруг сплошных фигур.

:stroke-color

Цвет нарисованных линий и контуров вокруг сплошных фигур.

:fill-color

Цвет, используемый для сплошных фигур.

:id

Идентификатор фигуры.

:gradient

Если задан, это должен быть идентификатор ранее определенного объекта градиента.

:clip-path

Идентификатор обрезного пути.

Функция: svg-rectangle svg x y width height &rest args

Добавляет в svg прямоугольник, верхний левый угол которого находится в позиции x/y, а размер — width/height.

(svg-rectangle svg 100 100 500 500 :gradient "gradient1")

Функция: svg-circle svg x y radius &rest args

Добавляет в svg окружность, центр которой находится в x/y, а радиус — radius.

Функция: svg-ellipse svg x y x-radius y-radius &rest args

Добавляет в svg эллипс, центр которого находится в x/y, а горизонтальный радиус — x-radius, а вертикальный — y-radius.

Функция: svg-line svg x1 y1 x2 y2 &rest args

Добавляет в svg линию, которая начинается в x1/y1 и продолжается до x2/y2.

Функция: svg-polyline svg points &rest args

Добавляет в svg линию с несколькими сегментами (также известную как «полилиния»), которая проходит через points, которое является списком пар координат X/Y.

(svg-polyline svg '((200 . 100) (500 . 450) (80 . 100))
              :stroke-color "green")

Функция: svg-polygon svg points &rest args

Добавляет в svg многоугольник, где points — это список пар X/Y, которые описывают внешнюю окружность многоугольника.

(svg-polygon svg '((100 . 100) (200 . 150) (150 . 90))
             :stroke-color "blue" :fill-color "red")

Функция: svg-path svg commands &rest args

Добавляет контур фигуры в svg в соответствии с commands, см. Команды SVG Path.

Координаты по умолчанию являются абсолютными. Для использования координат относительно последней позиции или — изначально — относительно начала координат, установите атрибут :relative в t. Этот атрибут может быть задан для функции или для отдельных команд. Если он задан для функции, все команды по умолчанию используют относительные координаты. Чтобы сделать отдельную команду использующей абсолютные координаты, установите :relative в nil.

(svg-path svg
	  '((moveto ((100 . 100)))
	    (lineto ((200 . 0) (0 . 200) (-200 . 0)))
	    (lineto ((100 . 100)) :relative nil))
	  :stroke-color "blue"
	  :fill-color "lightblue"
	  :relative t)

Функция: svg-text svg text &rest args

Добавляет указанный text в svg.

(svg-text
 svg "This is a text"
 :font-size "40"
 :font-weight "bold"
 :stroke "black"
 :fill "white"
 :font-family "impact"
 :letter-spacing "4pt"
 :x 300
 :y 400
 :stroke-width 1)

Функция: svg-embed svg image image-type datap &rest args

Добавляет встроенное (растровое) изображение в svg. Если datap равно nil, image должно быть именем файла; в противном случае это должна быть строка, содержащая данные изображения в виде сырых байтов. image-type должен быть типом изображения MIME, например "image/jpeg".

(svg-embed svg "~/rms.jpg" "image/jpeg" nil
           :width "100px" :height "100px"
           :x "50px" :y "75px")

Функция: svg-embed-base-uri-image svg relative-filename &rest args

Добавляет в svg встроенное (растровое) изображение, расположенное по адресу relative-filename. relative-filename ищется внутри file-name-directory свойства изображения :base-uri svg. :base-uri задает (возможно, несуществующее) имя файла создаваемого изображения svg, таким образом, все встроенные файлы ищутся относительно каталога файла :base-uri . Если :base-uri опущено, используется имя файла, из которого загружается изображение svg. Использование :base-uri улучшает производительность вставки больших изображений по сравнению с svg-embed, поскольку вся работа выполняется непосредственно librsvg.

;; Embeding /tmp/subdir/rms.jpg and /tmp/another/rms.jpg
(svg-embed-base-uri-image svg "subdir/rms.jpg"
           :width "100px" :height "100px"
           :x "50px" :y "75px")
(svg-embed-base-uri-image svg "another/rms.jpg"
           :width "100px" :height "100px"
           :x "75px" :y "50px")
(svg-image svg :scale 1.0
           :base-uri "/tmp/dummy"
           :width 175 :height 175)

Функция: svg-clip-path svg &rest args

Добавляет обрезной путь в svg. Если он применяется к фигуре через свойство :clip-path, части этой фигуры, которые лежат за пределами обрезного пути, не рисуются.

(let ((clip-path (svg-clip-path svg :id "foo")))
  (svg-circle clip-path 200 200 175))
(svg-rectangle svg 50 50 300 300
               :fill-color "red"
               :clip-path "url(#foo)")

Функция: svg-node svg tag &rest args

Добавляет пользовательский узел tag в svg.

(svg-node svg
          'rect
          :width 300 :height 200 :x 50 :y 100 :fill-color "green")

Функция: svg-remove svg id

Удаляет элемент с идентификатором id из svg.

Функция: svg-image svg

Наконец, svg-image принимает объект SVG в качестве аргумента и возвращает объект изображения, подходящий для использования в функциях, таких как insert-image.

Вот полный пример, который создает и вставляет изображение с окружностью:

(let ((svg (svg-create 400 400 :stroke-width 10)))
  (svg-gradient svg "gradient1" 'linear '((0 . "red") (100 . "blue")))
  (svg-circle svg 200 200 100 :gradient "gradient1"
                  :stroke-color "green")
  (insert-image (svg-image svg)))

Команды SVG Path

Пути SVG позволяют создавать сложные изображения, комбинируя линии, кривые, дуги и другие основные фигуры. Описанные ниже функции позволяют вызывать команды SVG path из программы Lisp.

Команда: moveto points

Перемещает перо в первую точку в points. Дополнительные точки соединяются линиями. points — это список пар координат X/Y. Последующие moveto команды представляют собой начало нового подпути.

(svg-path svg '((moveto ((200 . 100) (100 . 200) (0 . 100))))
          :fill "white" :stroke "black")

Команда: closepath

Заканчивает текущий подпуть, соединяя его обратно с начальной точкой. Линия проводится вдоль соединения.

(svg-path svg '((moveto ((200 . 100) (100 . 200) (0 . 100)))
                (closepath)
                (moveto ((75 . 125) (100 . 150) (125 . 125)))
                (closepath))
          :fill "red" :stroke "black")

Команда: lineto points

Рисует линию от текущей точки до первого элемента в points, списка пар позиций X/Y. Если указано более одной точки, рисуется полилиния.

(svg-path svg '((moveto ((200 . 100)))
                (lineto ((100 . 200) (0 . 100))))
          :fill "yellow" :stroke "red")

Команда: horizontal-lineto x-coordinates

Рисует горизонтальную линию от текущей точки до первого элемента в x-coordinates. Указание нескольких координат возможно, хотя обычно это не имеет смысла.

(svg-path svg '((moveto ((100 . 200)))
                (horizontal-lineto (300)))
          :stroke "green")

Команда: vertical-lineto y-coordinates

Рисует вертикальные линии.

(svg-path svg '((moveto ((200 . 100)))
                (vertical-lineto (300)))
          :stroke "green")

Команда: curveto coordinate-sets

Используя первый элемент в coordinate-sets, рисует кубическую кривую Безье от текущей точки. Если есть несколько наборов координат, рисуется полибезе. Каждый набор координат имеет вид (x1 y1 x2 y2 x y), где (x, y) — конечная точка кривой. (x1, y1) и (x2, y2) — контрольные точки в начале и в конце соответственно.

(svg-path svg '((moveto ((100 . 100)))
                (curveto ((200 100 100 200 200 200)
                          (300 200 0 100 100 100))))
          :fill "transparent" :stroke "red")

Команда: smooth-curveto coordinate-sets

Используя первый элемент в coordinate-sets, рисуется кубическая кривая Безье от текущей точки. Если задано несколько наборов координат, рисуется полибезеровская кривая. Каждый набор координат представляет собой список вида (x2 y2 x y), где (x, y) — конечная точка кривой, а (x2, y2) — соответствующая ей контрольная точка. Первая контрольная точка — отражение второй контрольной точки предыдущей команды относительно текущей точки, если эта команда была curveto или smooth-curveto. В противном случае первая контрольная точка совпадает с текущей точкой.

(svg-path svg '((moveto ((100 . 100)))
                (curveto ((200 100 100 200 200 200)))
                (smooth-curveto ((0 100 100 100))))
          :fill "transparent" :stroke "blue")

Команда: quadratic-bezier-curveto coordinate-sets

Используя первый элемент в coordinate-sets, рисуется квадратичная кривая Безье от текущей точки. Если задано несколько наборов координат, рисуется полибезеровская кривая. Каждый набор координат представляет собой список вида (x1 y1 x y), где (x, y) — конечная точка кривой, а (x1, y1) — контрольная точка.

(svg-path svg '((moveto ((200 . 100)))
                (quadratic-bezier-curveto ((300 100 300 200)))
                (quadratic-bezier-curveto ((300 300 200 300)))
                (quadratic-bezier-curveto ((100 300 100 200)))
                (quadratic-bezier-curveto ((100 100 200 100))))
          :fill "transparent" :stroke "pink")

Команда: smooth-quadratic-bezier-curveto coordinate-sets

Используя первый элемент в coordinate-sets, рисуется квадратичная кривая Безье от текущей точки. Если задано несколько наборов координат, рисуется полибезеровская кривая. Каждый набор координат представляет собой список вида (x y), где (x, y) — конечная точка кривой. Контрольная точка — отражение контрольной точки предыдущей команды относительно текущей точки, если эта команда была quadratic-bezier-curveto или smooth-quadratic-bezier-curveto. В противном случае контрольная точка совпадает с текущей точкой.

(svg-path svg '((moveto ((200 . 100)))
                (quadratic-bezier-curveto ((300 100 300 200)))
                (smooth-quadratic-bezier-curveto ((200 300)))
                (smooth-quadratic-bezier-curveto ((100 200)))
                (smooth-quadratic-bezier-curveto ((200 100))))
          :fill "transparent" :stroke "lightblue")

Команда: elliptical-arc coordinate-sets

Используя первый элемент в coordinate-sets, рисуется эллиптическая дуга от текущей точки. Если задано несколько наборов координат, рисуется последовательность эллиптических дуг. Каждый набор координат представляет собой список вида (rx ry x y), где (x, y) — конечная точка эллипса, а (rx, ry) — его радиусы. К списку могут быть добавлены атрибуты:

:x-axis-rotation

Угол в градусах, на который ось x эллипса повернута относительно оси x текущей системы координат.

:large-arc

Если установлено значение t, рисуется дуга с углом обхода, большим или равным 180 градусам. В противном случае рисуется дуга с углом обхода, меньшим или равным 180 градусам.

:sweep

Если установлено значение t, рисуется дуга в положительном направлении угла. В противном случае рисуется дуга в отрицательном направлении угла.

(svg-path svg '((moveto ((200 . 250)))
                (elliptical-arc ((75 75 200 350))))
          :fill "transparent" :stroke "red")
(svg-path svg '((moveto ((200 . 250)))
                (elliptical-arc ((75 75 200 350 :large-arc t))))
          :fill "transparent" :stroke "green")
(svg-path svg '((moveto ((200 . 250)))
                (elliptical-arc ((75 75 200 350 :sweep t))))
          :fill "transparent" :stroke "blue")
(svg-path svg '((moveto ((200 . 250)))
                (elliptical-arc ((75 75 200 350 :large-arc t
                                     :sweep t))))
          :fill "transparent" :stroke "gray")
(svg-path svg '((moveto ((160 . 100)))
                (elliptical-arc ((40 100 80 0)))
                (elliptical-arc ((40 100 -40 -70
                                     :x-axis-rotation -120)))
                (elliptical-arc ((40 100 -40 70
                                     :x-axis-rotation -240))))
          :stroke "pink" :fill "lightblue"
          :relative t)