Java, UX, HTML, CSS, WEB-design

Как создавать простые фигуры с помощью SVG

Краткое описание по статье Как создавать простые фигуры с помощью SVG

Название: Как создавать простые фигуры с помощью SVG . Краткое описание: ⭐ В прошлом единственным форматом изображения, . Дата публикации: 15.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года


В прошлом единственным форматом изображения, поддерживаемым всеми браузерами, был GIF, файл изображения, разработанный CompuServe. Затем появился файл изображения JPEG, который предлагал ужасное сжатие без потери каких-либо деталей, но размер действительно мал по сравнению с форматом изображения GIF.

Через некоторое время возникла цель создания продвинутой двухмерной векторной компьютерной графики в Интернете. С таким большим количеством конкурирующих форматов, которые были представлены W3C, SVG наконец был разработан в 1999 году.

Теперь, когда мы опубликовали учебник по фигурам CSS, мы хотели показать вам, как создавать фигуры с помощью SVG. В этом руководстве объясняется, как использовать SVG на веб-страницах.

Ваш дизайнерский набор инструментов
Неограниченное количество загрузок: более 500 000 веб-шаблонов, наборов иконок, тем и элементов дизайна


Что такое СВГ?

SVG, что означает Масштабируемая векторная графика, представляет собой формат векторного изображения на основе XML для Интернета. В отличие от форматов файлов изображений GIF, PNG и JPEG, SVG является масштабируемым, что означает, что независимо от того, как вы масштабируете или увеличиваете файл изображения, качество все равно будет хорошим.

Как файл XML, SVG можно создать, настроить и интегрировать с другими стандартами W3C, такими как DOM и XSL, с помощью любого текстового редактора. Изображения SVG также можно создавать визуально с помощью графических или векторных программ, таких как Adobe Illustrator.

Зачем использовать SVG?

  • Может быть создан и отредактирован в любом текстовом редакторе.
  • Возможна печать с высоким разрешением
  • Можно использовать для анимации
  • Является рекомендацией W3C
  • Работает с другими стандартами W3C, такими как DOM.
  • Отлично смотрится на дисплеях Retina
  • Масштабируется до любого размера, не вытягиваясь

SVG на HTML-страницах

SVG можно легко встроить в HTML с помощью тегов SVG. Рассмотрим синтаксис ниже.

<svg width=" " height=" ">
[element code here..]
</svg>

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

  • Круг
  • Прямоугольник
  • Эллипс
  • Линия
  • Полилиния
  • Полигон
  • Дорожка
  • Текст

Итак, давайте приступим к этому замечательному уроку.

Создание круга в SVG

Круговые SVG могут быть выполнены с использованием тега circle. Вот пример.

<svg height="300" width="300">
    <circle cx="60" cy="60" r="50" style="fill: blue; stroke: black; stroke-width: 2px;" />
</svg>

Полученное изображение Circle SVG будет выглядеть так:

круг-SVG

В этом примере я использовал тег круга а затем определите cx (координаты x) и cy (координаты y), которые будут определять центр круга. Затем я поставил значение 50 на р (радиус), который определяет длину отрезка прямой от его центра до периметра. Наконец, я добавил стили для цвета заливки, цвета обводки и ширины обводки, которые говорят сами за себя.

Создание прямоугольника в SVG

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

<svg height="300" width="300">
    <rect width="250" height="100" rx="11" ry="11" style="fill: yellow; stroke: green; stroke-width: 4px;"/>
</svg>

Полученное изображение Rectangle SVG будет выглядеть так:

прямоугольник-SVG

Используя тег прямоугольника, я определяю ширину и высоту прямоугольника. Затем я добавил прием и рай, который закругляет край прямоугольника. Вы можете удалить эти два (прием и рай), если вы хотите иметь острые края. Затем мы добавили стили для цвета заливки, цвета обводки и ширины обводки.

Создание эллипса в SVG

Ellipse SVG можно выполнить с помощью тега ellipse. Эллипсам не обязательно иметь одинаковую высоту и ширину, и, в отличие от окружности SVG, радиус (сх и су) это отличается. Рассмотрим код ниже.

Рассмотрим код ниже.

<svg height="300" width="300">
   <ellipse cx="190" cy="70" rx="100" ry="50" style="fill:red; stroke:green;stroke-width:2"/>
</svg>

Результирующее SVG-изображение Ellipse будет выглядеть так:

эллипс-SVG

То сх и су определить центр эллипса, а прием и рай определить радиус эллипса. Как видите, прием описывает ширину эллипса, а рай описывает, какой высоты он будет. Затем мы устанавливаем стили для цвета заливки, цвета обводки и ширины обводки.

Создание линии в SVG

Line SVG можно выполнить с помощью тега line. Из самого названия тег используется для рисования линий. Посмотрите пример ниже.

<svg height="300" width="300">
    <line x1="0" y1="0" x2="100" y2="150" style="stroke:#000; stroke-width:5" />
</svg>

Результирующее изображение Line SVG будет выглядеть так:

линия-SVG

На этом примере х1 (ось x) и у1 (ось Y) определить начальную точку линии. Пока х2 (ось x) и у2 (ось Y) определяют конечную точку линии. Используя атрибут стиля, я установил черный цвет обводки и ширину обводки 5 пикселей.

Создание полилинии в SVG

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

<svg height="300" width="300">
   <polyline points="60,50 150,120 100,220 200,170" style="fill:none;stroke:black;stroke-width:3" />
</svg>

Полученное изображение Polyline SVG будет выглядеть так:

полилиния

С использованием Икс (ось x) и у (ось Y), вы можете установить отдельные точки линий, чтобы создать нужную форму. Как видите, у меня есть 4 точки настройки, соединенные линиями. Я также добавил обводку черного цвета и ширину обводки 3 пикселя.

Создание полигона в SVG

Polygon SVG можно выполнить с помощью тега polygon. Этот элемент будет рисовать фигуру, имеющую более 3-х сторон. Проверьте код ниже.

<svg height="300" width="300">
    <polygon points=" 60,20 100,40 100,80 60,100 20,80 20,40" style="fill:cyan;stroke:red;stroke-width:1" />
</svg>

Полученное изображение Polygon SVG будет выглядеть так:

многоугольник-SVG

В Polygon SVG точки определяются Икс и у ось для каждой стороны многоугольника от последней точки до последней. В этом примере я создал шестиугольник с 6 сторонами. Как видите, есть 6 точек, которые соединяются вместе, определяемые осями x и y. Затем я добавляю голубой цвет заливки, затем красный цвет обводки и ширину обводки 1 пиксель.

Создание путей в SVG

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

  • М перейти к
  • л линия к
  • В вертикальная линия к
  • ЧАС горизонтальная линия к
  • С кривая к
  • С плавная кривая к
  • Т квадратичная кривая Безье
  • А эллиптическая дуга
  • Z близкий путь

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

<svg height="300" width="300">
<path d="M 30 40 C 140 -30 180 90 20 160 L 120 160" style="fill: none; stroke: black; stroke-width: 6px;" />
</svg>

Результирующее изображение Path SVG будет выглядеть так:

путь-SVG

Из приведенного выше кода видно, что я использовал букву д. Этот д атрибут всегда будет командой перемещения. Затем я использую M, что означает перейти к. Прежде чем вы сможете что-либо нарисовать, вы должны переместить виртуальный курсор в желаемое место.

Итак, для этого примера я перемещаю ось X на 30, а ось Y на 40. Кривая начинается с 140, -30 в качестве начальной точки касательной. Затем кривая указывает вниз вправо с точками 180, 90 и заканчивается 20, 160. Чтобы завершить путь, я создал линию с точками 120 и 160.

Создание текста в SVG

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

<svg height="300" width="300">
  <text x="20" y="30" fill="blue" font-size="20">This a great sample for Text SVG! </text>
</svg>

Результирующее текстовое SVG-изображение будет выглядеть так:

текст SVG

В этом примере я установил положение текста по оси X равным 20. Это поместит текст на 20 пикселей слева, а я установил ось Y на 30, что поместит текст на 30 пикселей сверху. Затем я установил синий цвет заливки и размер шрифта 20 пикселей. Это отобразит текст «Это отличный образец для Text SVG!»

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.


Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — Как создавать простые фигуры с помощью SVG

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»