Рисование SVG – Учебное пособие по основам
SVG – это язык XML, который используется для рисования векторной графики. Если вы знакомы с основами HTML и XML, вы можете легко создавать SVG в любом текстовом редакторе! Мы надеемся, что наше руководство по рисованию SVG поможет вам в работе или учебе. Мы пытаемся объяснить общие правила и стандартные шаги создания SVG с нуля на простых примерах.
Цель этой главы – объяснить, как рисовать изображения SVG. Глава включает статьи о системах и единицах координат SVG, основных фигурах SVG, данных пути SVG, тексте SVG, основных преобразованиях SVG, цвете SVG, заливках и обводках в SVG, встроенном содержимом SVG и SVG фильтрах и градиентах.
- Системы координат и единицы измерения SVG В этой статье вы найдете описание рабочей области SVG, которая определяется значениями атрибутов viewport и viewBox.
- Фигуры SVG В этой статье вы узнаете, как создавать различные простые фигуры и применять к ним некоторые свойства стиля.
- Данные пути SVG В этой статье показано, как пути можно использовать для рисования различных контуров или фигур путем комбинирования линий, дуг и кривых Безье. Здесь описана группа команд для создания SVG paths.
- Текст SVG В этой статье представлены элементы текстового содержимого и рассмотрены некоторые общие атрибуты, которые помогают отображать, форматировать и стилизовать текст в изображении SVG.
- Основные трансформации SVG Вы узнаете, как применять функции трансформации для вращения, масштабирования, перемещения и наклона графических объектов с помощью transform атрибута SVG, а также рассмотрите примеры кода для SVG трансформаций.
- Матрица трансформации SVG Узнайте, как использовать матрицу трансформации для поворота, масштабирования, перевода и наклона графики SVG, а также рассмотрите примеры кода для преобразований SVG.
- Заливка и обводка SVG В этой статье мы описываем несколько свойств, которые позволяют вам устанавливать различные аспекты заливки и обводки, включая цвет, непрозрачность, толщину, использование штрихов и т. д.
- Цвет SVG В этой статье подробно рассматриваются различные способы раскрашивания текста и фигур SVG. Вы найдете обзор того, как определяется цвет, включая различные способы управления прозрачностью содержимого SVG.
- Цвет фона SVG В этой статье мы обсудим, что такое фон в SVG. Вы также найдете примеры кода SVG и подробное руководство о том, как задать или изменить цвет фона.
- Встроенный контент SVG – это контент, который импортируется в документ из другого ресурса. Вы увидите, как включать и отображать растровые изображения и элементы HTML в объекте SVG.
- SVG-фильтры и градиенты Рассмотрены примитивы фильтров, создающие эффекты размытия, цвета и освещения. В главе показано, как линейные или радиальные градиенты могут украсить любую линию, фигуру или текст в графике SVG.
В статьях мы будем создавать векторные SVG-изображения с помощью XML-кода. На рисунке изображен логотип Aspose – изображение SVG. Всего несколько строк кода и вы сможете создать иконку, логотип или любое простое изображение.
Ниже показан пример SVG-кода для логотипа Aspose ( aspose.svg):
1<svg height="400" width="400" viewBox="-40 0 400 400" xmlns="http://www.w3.org/2000/svg">
2 <path d="M 25 78 C -26 28 97 -15 98 91 C 86 34 16 33 25 78" fill="#3993c9"/>
3 <path d="M 25 78 C -26 28 97 -15 98 91 C 86 34 16 33 25 78" fill="#f3622a" transform= "rotate(90 30 64) translate(5 -14)"/>
4 <path d="M 25 78 C -26 28 97 -15 98 91 C 86 34 16 33 25 78" fill="#c1af2c" transform= "rotate(180 25 78) translate(-19 9)"/>
5 <path d="M 25 78 C -26 28 97 -15 98 91 C 86 34 16 33 25 78" fill="#499c43" transform= "rotate(-90 25 78) translate(-5 14)"/>
6 <circle cx="34.5" cy="73.5" r="40" fill="white" fill-opacity="0.3" />
7</svg>Aspose.SVG предлагает бесплатные веб-приложения SVG для конвертации SVG или файлов изображений, объединения файлов SVG, векторизации изображений, генерации спрайтов SVG, кодирования данных SVG в base64 и векторизации текста. Эти онлайн-приложения работают в любой операционной системе с веб-браузером и не требуют установки дополнительного программного обеспечения. Это быстрый и простой способ эффективно и результативно решить ваши задачи, связанные с SVG!