Учебник SVG – основы SVG

SVG – это XML-язык для создания векторной графики. SVG-разметку можно писать в текстовом редакторе, проверять в браузере, а затем обрабатывать с помощью API Aspose.SVG, когда нужно генерировать, редактировать, рендерить или конвертировать SVG-файлы из кода.

Этот учебник объясняет SVG-концепции, которые встречаются в большинстве практических задач: системы координат, viewBox, фигуры, пути, текст, цвета, заливки, обводки, градиенты, фильтры, трансформации и встроенный контент. Используйте его как основу перед переходом к статьям об API о редактировании SVG, конвертации, векторизации или генерации документов.

Координаты и макет

Системы координат и единицы SVG объясняют холст SVG, область просмотра, пользовательские системы координат и единицы измерения.
SVG viewBox показывает, как viewBox масштабирует, обрезает и смещает SVG-графику.

Фигуры, пути и текст

Фигуры SVG охватывают прямоугольники, окружности, эллипсы, линии, ломаные линии и многоугольники.
Данные SVG path объясняют path-команды для линий, дуг, кривых Безье и произвольных контуров.
Текст SVG знакомит с элементами <text>, <tspan> и <textPath> для отображения и стилизации SVG-текста.

Цвет и рисование

Цвет SVG объясняет значения цветов, fill, stroke, opacity и использование цвета для фигур, путей и текста.
Заливки и обводки в SVG фокусируются на модели рисования SVG, ширине обводки, окончаниях линий, соединениях и штрихах.
Цвет фона SVG показывает надежные способы добавить или изменить фон SVG.
Градиенты SVG объясняют линейные и радиальные градиенты, элементы <stop>, направление и повторное использование через url(#id).

Эффекты и трансформации

Трансформации SVG охватывают translate, scale, rotate, skew и матричные функции.
Матрица трансформации SVG объясняет матричную модель, лежащую в основе SVG-трансформаций.
Фильтры SVG знакомят с размытием, тенями, освещением и цветовыми примитивами фильтров.

Встроенный контент и практика

Встроенный контент SVG показывает, как SVG может включать растровые изображения, вложенные SVG и HTML.
Как нарисовать снежинку – практический SVG-проект с переиспользуемыми элементами, поворотом и анимацией.

Как пользоваться этим учебником SVG

Начните с тем, которые соответствуют вашей задаче:

Изучите координаты и viewBox, если нужно понять SVG-макет, масштабирование, обрезку или адаптивную графику.
Используйте фигуры, пути и текст, когда нужно нарисовать SVG-геометрию или создать читаемый текст в разметке.
Используйте цвет, fill, stroke, градиенты и фон, когда структура SVG уже правильная, но нужно изменить внешний вид.
Используйте фильтры и трансформации, когда нужны размытие, тени, освещение, поворот, масштабирование, наклон или матричное позиционирование.
Переходите к статьям Aspose.SVG API, когда нужно генерировать, редактировать, конвертировать, рендерить или векторизовать SVG-файлы из кода.

Примеры в этом учебнике используют SVG-разметку напрямую. Ниже показан логотип Aspose, отрендеренный как SVG-изображение. Даже небольшой SVG-фрагмент может определить переиспользуемую иконку, логотип или простую иллюстрацию.

Логотип 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