Figure css: : The Figure with Optional Caption element — HTML: HyperText Markup Language

CSS: figures & captions

CSS: figures & captions

Languages

See also the index of all tips.

On this page:

• Adding captions
• Scaling the image
• Caption on top
• Figures in HTML4

Figures & captions

Scale model of the Eiffel tower in Parc Mini-France

HTML5 introduced an element to insert a figure with a caption. (We’ll show a convention to do the same with HTML4 below.)

<figure>
  <p><img src="eiffel.jpg"
   
    alt="Eiffel tower">
  <figcaption>Scale model of the
    Eiffel tower in
    Parc Mini-France</figcaption>
</figure>

For example, to float the figure to the right, in a space equal to 30% of the width of the surrounding paragraphs, these rules will do the trick:

figure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.  5em;
  padding: 0.5em;
}

In fact, only the first two declarations (float and width) are essential, the rest is just for decoration.

Scaling the image

There is one problem here, and that is that the image may be too wide. In this case, the image is always 136 px wide and the figure is 30% of the surrounding text. So if you make the window narrower, it may be that the image overflows the figure (try it!).

If you know the width of all images in the document, you can add a minimum width to figure, like this:

figure {
  min-width: 150px;
}

Saint Tropez and its fort in the evening sun

Another way is to scale the image itself. That’s what we have done with the image on the right here. As you can maybe see if you make the window very wide, JPEG images don’t scale very well. But if the image is a diagram or a graph in SVG format, scaling in fact works beautifully. Here is the mark-up we used:

<figure>
  <p><img class=scaled src="st-tropez. jpg"
    alt="St. Tropez">
  <figcaption>Saint Tropez and its
    fort in the evening sun</figcaption>
</figure>

And this is the style sheet:

figure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
 img.scaled {
  width: 100%;
}

The only addition is the last rule: it makes the image as wide as the inside of the figure (the area inside the border and the padding).

Putting the caption on top

The Mediterranean Sea near Cap Ferrat

HTML allows the figcaption element to be either the first or the last element inside the figure and, without any CSS rules to the contrary, that will cause the caption to be at the top or the bottom of the figure, respectively.

But, no matter what the mark-up, you can also specify in CSS whether the caption should appear above or below the image.

You do that by telling the browser that the figure should be formatted as a table, with the image as its only cell and the caption as the table’s caption. Just add these rules to the style sheet from the previous sections:

figure {
  display: table;
}
figcaption {
  display: table-caption;
  caption-side: top;
}

The style we used on this page includes a gray border around the figure. Unfortunately, when we use table layout to put the caption on the top or bottom, we need to specify the border differently, because the caption is put outside the border of the table. We fix that by putting a part of the border on the caption itself:

figure {
  border-top: none;
  padding-top: 0;
}
figcaption {
  padding: 0.5em;
  border: thin silver solid;
  border-bottom: none;
}

Figures & captions in HTML4

Scale model of the Eiffel tower in Parc Mini-France

HTML4, unlike HTML5, doesn’t have an element that inserts a figure with a caption.

It was proposed (see HTML3), but didn’t made it into HTML4. Here is one way to simulate a figure element:

<div class=figure>
  <p><img src="eiffel.jpg"
   
    alt="Eiffel tower">
  <p>Scale model of the
    Eiffel tower in
    Parc Mini-France
</div>

Then in the style sheet you use the class «figure» to format the figure the way you want. For example, to float the figure to the right, in a space equal to 30% of the width of the surrounding paragraphs, these rules will do the trick:

div.figure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}

As before, only the first two declarations (float and width) are essential, the rest is just for decoration.

Scaling the image in HTML4

To avoid that wide images overflow the figure, and if you know the width of all images in the document, you can add a minimum width to the DIV, e. g., like this:

div.figure {
  min-width: 150px;
}

Saint Tropez and its fort in the evening sun

To scale the image to the width of the figure instead (as we have done with the image on the right), you can add a CLASS attribute and a CSS rule, very similar to the HTML5 example above. Here is the mark-up we used:

<div class=figure>
  <p><img class=scaled src="st-tropez.jpg"
    alt="St. Tropez">
  <p>Saint Tropez and its
    fort in the evening sun
</div>

And this is the style sheet:

div.figure {
  float: right;
  width: 30%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}
img.scaled {
  width: 100%;
}

The only addition is the last rule: it makes the image as wide as the inside of the DIV (the area inside the border and the padding).

Putting the caption on top in HTML4

The Mediterranean Sea near Cap Ferrat

To put the caption on top, add these rules to the style sheet from the previous sections:

div. figure {
  display: table;
}
div.figure p + p {
  display: table-caption;
  caption-side: top;
}

The ‘+’ causes the rule to match a P that follows another P. Which means in this case that it matches the second P of the figure, the one that contains the caption.

(This technique may expose bugs in some browsers from before 2003, especially when combined with scaling the image, as I did here.)

As before, the gray border that we chose to put around the figures on this page will only be around the image itself with this technique. To put it around the image and the caption, add these rules:

div.figure {
  border-top: none;
  padding-top: 0;
}
div.figure p + p {
  padding: 0.5em;
  border: thin silver solid;
  border-bottom: none;
}

Bert Bos, style activity lead
Copyright © 1994–2021 W3C^® Privacy policy

Created 17 January 2001;
Last updated Wed 06 Jan 2021 05:40:49 AM UTC

Languages

• Azərbaycan
• Български
• Deutsch
• Ελληνικά
• English
• Español
• Français
• हिन्दी
• Hrvatski
• Bahasa Indonesia
• Norsk
• Nederlands
• Polski
• Português
• Português brasileiro
• Русский
• ไทย
• Tagalog
• Українська
• Tiếng Việt
• 简体中文
• 繁體中文

About the translations

Элементы figure и figcaption — Веб-стандарты

В обычных печатных изданиях, таких как книги и журналы, изображения, таблицы или примеры кода обычно сопровождаются подписью. До сих пор у нас не было возможности семантически выделять такой тип содержимого напрямую в HTML, вместо того чтобы прибегать к именам классов СSS. HTML5 надеется исправить эту проблему с помощью новых элементов: <figure> и <figcaption>. Давайте разберемся!

Элемент

<figure>Скопировать ссылку

Предполагается, что элемент <figure> будет использоваться в сочетании с элементом <figcaption> для того, чтобы выделять диаграммы, иллюстрации, фотографии и примеры кода (помимо прочего). Вот что говорится о <figure> в спецификации:

Элемент <figure> представляет собой фрагмент независимого содержимого, совсем необязательно с подписью, который как правило относится к отдельному элементу из основного содержимого документа, и может быть удалён из документа без ущерба его смыслу. Спецификация W3C

Элемент

<figcaption>Скопировать ссылку

Этот элемент стал поводом серьезных споров. Спецификация изначально предлагала приспособить для этих целей элемент <legend>, вместо того, чтобы придумывать новый элемент. Были и другие предложения, включавшие <label>, <caption>, <p> и даже заголовки с <h2> по <h6>. Семантика элемента <legend> изменилась, и поэтому мы начали использовать комбинацию <dt> и <dd> внутри <figure> по предложению Джереми. Но большинство этих идей были отклонены из-за отсутствия обратной совместимости для CSS-оформления.

Наши постоянные читатели знают, что недавно был представлен новый элемент <figcaption>. Кто знает, приживется ли он, а пока давайте узнаем, что о нём говорит спецификация:

Элемент <figcaption> представляет собой заголовок или описание для <figure>.

Спецификация W3C

Элемент <figcaption> является необязательным и может появляться до или после содержимого внутри <figure>. Только один элемент <figcaption> может быть помещен в <figure>, хотя сам элемент <figure> может содержать несколько дочерних элементов (например, <img> или <code>).

Использование

<figure> и <figcaption>Скопировать ссылку

Итак, мы узнали, что об этих элементах говорится в спецификации. Как же их использовать? Давайте рассмотрим это на примерах.

<figure> для изображенияСкопировать ссылку

Изображение в элементе <figure> без подписи:

Вот код для этого:

<figure>
    <img src="orang-utan.jpg" alt="Малыш орангутанга свисает с каната.">
</figure>

<figure> с изображением и подписьюСкопировать ссылку

Изображение внутри элемента <figure> с поясняющей подписью:

Наглая макака из Борнео. Фото Ричарда Кларка

И код, который мы использовали:

<figure>
    <img src="macaque. jpg" alt="Макака на дереве.">
    <figcaption>
        Наглая макака из Борнео.
        Фото <a href="…">Ричарда Кларка</a>
    </figcaption>
</figure>

<figure> с несколькими изображениямиСкопировать ссылку

Размещение нескольких изображений внутри одного элемента <figure>

с общей подписью:

Слева направо: кукабара, пеликан и многоцветный лорикет. Фотографии Ричарда Кларка

И сам код:

<figure>
    <img src="kookaburra.jpg" alt="Кукабара.">
    <img src="pelican.jpg" alt="Пеликан на пляже.">
    <img src="lorikeet.jpg" alt="Наглый многоцветный лорикет.">
    <figcaption>
        Слева направо: кукабара, пеликан и многоцветный лорикет.
        Фотографии <a href="…">Ричарда Кларка</a>
    </figcaption>
</figure>

<figure> с блоком кодаСкопировать ссылку

Элемент <figure> может быть также использован для примеров кода:

Creative Commons Attribution Share-alike license

Использование элемента <small> вокруг ссылки на лицензию Creative Commons с rel="license".

Ниже приведен код для этого:

<figure>
    <blockquote>
        <p><code><small>
            <a rel="license" href="…">
                Creative Commons Attribution Share-alike license
            </a>
        </small></code></p>
    </blockquote>
    <figcaption>
        Использование элемента <code>&lt;small&gt;</code>
        вокруг ссылки на лицензию Creative Commons
        с <code>rel="license"</code>.
    </figcaption>
</figure>

Различия между

<figure> и <aside>Скопировать ссылку

Мы уже говорили об элементе <aside> в предыдущей статье, но важно отметить разницу между ними. При выборе между <aside> или <figure>, стоит спросить себя, имеет ли содержимое элемента важное значение для понимания содержимого:

• Если содержимое просто имеет отношение и не является существенным, то используйте <aside>.
• Если содержимое является важным, но его положение в потоке общего содержимого не так важно, используется элемент <figure>.

Обратите внимание, что если положение содержимого в тексте тесно связано с предыдущим и последующим содержимым, следует использовать более подходящие элементы — например, <div>, старый добрый <img>, <blockquote>, или даже <canvas>, в зависимости от типа содержимого.

Не останавливайтесь на достигнутом!Скопировать ссылку

Не стоит ограничивать использование <figure> изображениями и примерами кода. Другим содержимым, подходящим по смыслу для использования в элементе <figure> может быть аудио, видео, графики (возможно, с использованием <canvas> или <svg>), стихи или таблицы со статистикой.

Однако использование элемента <figure> не всегда целесообразно. Например, графический баннер не стоит размечать в <figure>. Используйте для этого просто <img>.

ВыводСкопировать ссылку

Как мы продемонстрировали в этой статье, элемент <figure> открывает много возможностей. Только не забудьте убедиться, что он подходит для конкретного случая. Хотя вряд ли вы бездумно относитесь к разметке, так ведь?

HTML тег

onplay	Скрипт викликається коли медіа дані готові почати відтворення.
onafterprint	Скрипт виконується тільки після як документ надрукований.
onbeforeprint	Скрипт виконується перед тим, як документ надрукований.
onbeforeunload	Скрипт виконується коли документ ось-ось буде вивантажений
onhashchange	Скрипт виконується коли там відбулися зміни до частини якоря в URL
onload	Викликається після того як завантаження елемента завершене.
onmessage	Скрипт виконується коли викликане повідомлення.
onoffline	Спрацьовує коли браузер починає працювати в автономному режимі
ononline	Спрацьовує коли браузер починає працювати в режимі онлай.
onpagehide	Скрипт виконується коли користувач переходить на іншу сторінку сторінку.
onpageshow	Скрипт виконується коли користувач заходить на сторінку.
onpopstate	Скрипт виконується коли змінено історію одного вікна.
onresize	Скрипт виконується, коли розмір вікна браузера змінюється.
onstorage	Скрипт виконується, коли вміст Web Storage оновлюється.
onunload	Викликається, коли сторінка розвантажена, або вікно браузера було зачинено.
onblur	Скрипт виконується, коли елемент втрачає фокус.
onchange	Викликається в той момент, коли значення елемента змінюється.
oncontextmenu	Скрипт виконується коли викликається контекстне меню.
onfocus	Викликається в той момент, коли елемент отримує фокус.
oninput	Скрипт викликається коли користувач вводить дані поле.
oninvalid	Скрипт виконується, коли елемент недійсний.
onreset	Викликається, коли натискається у формі кнопка типу Reset.
onsearch	Викликається, коли користувач щось пише в поле пошуку (для <input type="search">)
onselect	Викликаєтсья після того як будь-який текст був обраний в елементі.
onsubmit	Викликається при відправленні форми.
onkeydown	Подія викликається, коли користувач затис (натиснув та не відпускає) клавішу.
onkeypress	Викликається коли корисрувач натиснув на клавішу.
onkeyup	Викликається коли користувач відпускає клавішу.
ondblclick	Виникає при подвійному клацанні ЛКМ на елементі.
ondrag	Періодично викликається при операції перетягування.
ondragend	Викликається коли користувач відпускає перелягуваний елемент.
ondragenter	Викликається, коли перетягуваний елемент входить в цільову зону.
ondragleave	Викликається, коли перетягуваний елемент виходть з зони призначення.
ondragover	Викликається, коли перетягуваний елемент знаходиться в зоні призначення.
ondragstart	Викликається, коли користувач починає перетягувати елемент, або виділений текст.
ondrop	Викликається, коли перетягуваний елемент падає до зони призначення.
onmousedown	Викликається, коли користувач затискає ЛКМ на елементі.
onmousemove	Викликається, коли курсор миші переміщається над елементом.
onmouseout	Викликається, коли курсор виходить за межі елемента.
onmouseover	Виконується, коли курсор наводиться на елемент.
onmouseup	Викликається, коли користувач відпускає кнопку миші.
onscroll	Викликається при прокручуванні вмісту елемента (чи веб-сторінки).
onwheel	Викликається, коли користувач прокручує коліщатко миші.
oncopy	Викликається, коли користувач копіює вміст елемента.
oncut	Викликається, коли користувач вирізає вміст елемента.
onpaste	Викликається, коли користувач вставляє вміст в елемент.
onabort	Виконується при перериванні якоїсь події.
oncanplay	Скрипт виконується коли файл готовий, для початку відтворення (коли він буферизований достатньо, щоб почати відтворення)
oncanplaythrough	Скрипт виконується, коли контент вже може бути відтворений без переривання на буферизацію.
oncuechange	Скрипт виконується коли змінюється кий в <track> елемента
ondurationchange	Викликається коли змінюється довжина медіа файлу.
onemptied	Викликається коли доступ до медіа контенту обривається (зникло з’єднання з мережею).
onended	Викликається коли медіа елемент повністю відтворив свій зміст.
onshow	Викликається, коли елемент <menu> буде відображено як контекстне меню.
onloadedmetadata	Скрипт виконується коли метадані (розміри чи тривалість) завантажуються.
onloadeddata	Викликається коли медіа данні завантажено.
onloadstart	Викликається коли браузер тільки починає завантажувати медіа дані з сервера.
onpause	Викликається коли відтворення медіа даних призупинено.
onplaying	Викликається коли розпочато відтворення медіа даних.
onprogress	Подія onprogress відбувається, коли браузер завантажує вказане аудіо / відео.
onratechange	Викликається коли змінюється швидкість відтворення медіа даних.
onseeked	Викликається коли атрибут seeked у тега audio або video змінює значення з true на false.
onseeking	Викликається коли атрибут seeking у тегів audio або video змінює значення з false на true
onstalled	Скрипт виконується коли браузер з будь-якої причини не може отримати медіа дані.
onsuspend	Скрипт виконується коли з будь-якої причини завантаження данних призупинено до його повного завантаження.
ontimeupdate	Викликається коли змінилася позиція відтворення елемента <audio> або <video>.
onvolumechange	Викликається коли змінюється гучність звуку.
onwaiting	Викликається коли наступний кадр при відтворенні медіа даних недоступний, але браузер очікує що він незабаром завантажиться.
ontoggle	Викликається, коли користувач відкриває або закриває елемент <details>.
onerror	Викликається якщо при завантаженні елемента сталася помилка.
onclick	Подія викликається коли користувач клацає ЛКМ по елементу.

Карманное руководство по написанию SVG. Глава 2 — CSS-LIVE

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.

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

Базовые фигуры

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

Прямоугольник

Элемент <rect> определяет прямоугольник

<svg>
    <rect fill="#BBC42A" />
</svg>

Увидеть демо можно здесь.

Атрибуты width и height устанавливают размер прямоугольника, в то время как fill — внутренний цвет фигуры. Если не указаны единицы измерения, то по умолчанию это будут пиксели, а если не указать fill , по умолчанию цвет будет чёрным.

Другие атрибуты, которые могут быть добавлены – координаты x и y . Эти значения передвинут фигуру вдоль соответствующей оси согласно размерам, установленным элементом <svg> .

Также есть возможность создать закруглённые углы, указав значения в атрибутах rx и ry. К примеру, rx="5" ry="10" сгенерирует горизонтальные стороны углов с радиусом 5px, а вертикальные в 10px.

Круг

Элемент <circle> строится, основываясь на центральной точке и внешнем радиусе.

<svg>
    <circle cx="75" cy="75" r="75" fill="#ED6E46" />
</svg>

Увидеть демо можно здесь.

Координаты cx и cy определяют положение центра круга относительно размеров рабочей области, заданных элементом <svg>.

Атрибут r устанавливает размер внешнего радиуса.

Эллипс

Элемент <ellipse> описывает эллипс, который строится по центральной точке и двум радиусам.

<svg>
    <ellipse cx="100" cy="100" rx="100" ry="50" fill="#7AA20D" />
</svg>

Увидеть демо можно здесь.

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

Линия

Данный элемент определяет прямую линию с начальной и конечной точкой.

<svg>
    <line x1="5" y1="5" x2="100" y2="100" stroke="#765373" stroke-width="8"/> 
</svg>

Увидеть демо можно здесь.

Значения атрибутов x1 и y1 устанавливают координаты начала линии, а значения x2 и y2 — определяют конец линии.

Ломаная линия

<polyline> определяет набор соединённых отрезков прямой линии, что в результате даёт, как правило, незамкнутую фигуру (начало и конец точек которой не связаны).

<svg>
    <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" fill="white" stroke="#BBC42A" stroke-width="6" />
</svg>

Увидеть демо можно здесь.

Значения в points определяют положение фигуры по осям x и y от начала до конца фигуры и разбиты по парам x,y во всём списке значений.

Нечётное число точек является ошибкой.

Многоугольник

Элемент <polygon> определяет замкнутую фигуру состоящую из связанных линий.

<svg>
    <polygon points="50,5 100,5 125,30 125,80 100,105 50,105 25,80 25,30" fill="#ED6E46" />
</svg>

Увидеть демо можно здесь.

Вершины многоугольника заданы последовательностью из восьми пар значений х, y.

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

Элемент path

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

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

Данные path

Данные path содержатся в атрибуте d внутри элемента <path>, определяя форму фигуры: <path d="<конкретные данные path>" />.

Данные, включённые в атрибут d, описывают команды для path: moveto, line, curve, arc и closepath.

Детали <path> ниже определяют особенности контура для рисунка лайма:

<svg>
    <path fill="#7AA20D" stroke="#7AA20D" stroke-width="9" stroke-linejoin="round" d="M248.761,92c0,9. 801-7.93,17.731-17.71,17.731c-0.319,0-0.617,0-0.935-0.021c-10.035,37.291-51.174,65.206-100.414,65.206 c-49.261,0-90.443-27.979-100.435-65.334c-0.765,0.106-1.531,0.149-2.317,0.149c-9.78,0-17.71-7.93-17.71-17.731 c0-9.78,7.93-17.71,17.71-17.71c0.787,0,1.552,0.042,2.317,0.149C39.238,37.084,80.419,9.083,129.702,9.083    c49.24,0,90.379,27.937,100.414,65.228h0.021c0.298-0.021,0.617-0.021,0.914-0.021C240.831,74.29,248.761,82.22,248.761,92z" />
</svg>

moveto

Команды moveto (М или м) устанавливают новые точки, как будто мы поднимаем ручку и начинаем рисовать в новом месте на листе бумаги. Строка кода, составляющего данные path, должна начинаться с команды moveto, как показано выше в примере с лаймом.

Команды moveto, которые следуют за исходной, представляют собой начало нового фрагмента контура, создавая составной контур. Заглавная М указывает, что после нее идут абсолютные координаты, тогда как строчная m указывает на относительные координаты.

closepath

Closepath (Z и z) заканчивает текущий фрагмент контура приводит к рисованию прямой линии от текущей точки до начальной.

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

И заглавная и строчная буква z здесь имеют одинаковые результаты.

lineto

Команды lineto рисуют прямые линии от текущей точки до новой.

L, l

Команды L и l рисуют линию от текущей точки до следующих предоставленных координат точки. Эта новая точка затем становится текущей точкой и так далее.

Заглавная L означает, что после неё идёт абсолютное позиционирование, в то время как после l — относительное.

H, h

Команды H и h рисуют горизонтальную линию от текущей точки.

Заглавная H означает, что после неё идёт абсолютное позиционирование, в то время как после h — относительное.

V, v

Команды V и v рисуют вертикальную линию от текущей точки.

Заглавная V означает, что после неё идёт абсолютное позиционирование, в то время как после v — относительное.

Команды для создания кривых

Для рисования кривых есть три группы команд: кубическая кривая Безье (C, c, S, s), квадратичная кривая Безье (Q, q, T, t), и дуга эллипса (A, a)..

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

Кубическая кривая Безье

Команды C и c рисуют кубическую кривую Безье от текущей точки, используя параметры (х1, y1) в качестве управляющей точки в начале кривой и (x2, y2) в качестве управляющей точки в конце, определяющих особенности формы кривой.

Команды S и s также рисуют кубическую кривую Безье, но в данном случае предполагается, что первая управляющая точка является отражением второй (имеется в виду вторая управляющая точка предыдущей команды, см. более подробное описание ниже — прим. перев.).

Следующий код рисует базовую кубическую кривую Безье:

<svg>
    <path fill="none" stroke="#333333" stroke-width="3" d="M10,55 C15,5 100,5 100,55" />
</svg>

Увидеть демо можно здесь.

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

Команды S и s также рисуют кубическую кривую Безье, но в данном случае предполагается, что первая управляющая точка является отражением последней для предшествующей команды C. Отражение производится относительно начальной точки команды S.

Заглавная C сигнализирует, что за ней следует абсолютное позиционирование, в то время как после строчной c — относительное. Та же самая логика применяется к S и s.

Квадратичная кривая Безье

Квадратичные кривые Безье (Q, q, T, t) похожи на кубические, но имеют всего одну управляющую точку.

Следующий код рисует базовую квадратичную кривую Безье.

<svg>
    <path fill="none" stroke="#333333" stroke-width="3" d="M20,50 Q40,5 100,50" />
</svg>

Увидеть демо можно здесь.

Управление первыми и последними наборами значений, M20,50 и 100,50 будет влиять на позиционирование начала и конца точек кривой. Центральный набор значений Q40,5 задаёт управляющую точку для кривой, определяя ее форму.

Q и q рисуют кривую от начальной точки до конечной, используя (x1,y1) в качестве управляющей точки. T и t рисуют кривую от начальной точки до конечной, предполагая, что управляющая точка является отражением управляющей точки предыдущей команды относительно начальной точки новой команды T или t.

Заглавная Q сигнализирует, что за ней следует абсолютное позиционирование, в то время как после строчной q относительное. Та же самая логика применяется к T и t.

Дуга эллипса

Дуга эллипса (A, a) определяет часть эллипса. Эти части создаются с помощью команд A или a, которые создают дугу путем указания начальной и конечной точки, радиусов x и y, вращение и направление.

Взгляните на код для базовой дуги эллипса:

<svg>
    <path fill="none" stroke="#333333" stroke-width="3" d="M65,10 a50,25 0 1,0 50,25" />
</svg>

Первые и последние наборы значений внутри этого контура, M65,10 и 50,25 представляют начальные и конечные координаты, а вторые наборы значений определяют два радиуса. Значения 1, 0 (large-arc-flag и sweep-flag) определяют то, как будет отрисована дуга, поскольку для этого есть четыре различных возможных варианта.

Следующая диаграмма показывает четыре варианта выбора дуги и то, как влияют значения large-arc-flag и sweep-flag на конечное отображение отрезка дуги.

Увидеть демо можно здесь.

Копирование из векторных редакторов

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

После того, как графика готова, сгенерированный XML-код, который может быть достаточно длинным в зависимости от сложности, может быть скопирован и встроен в HTML. Разбивка каждого раздела SVG и наличие правильных организационных элементов может значительно помочь в навигации и понимании этих, казалось бы, сложных и многословных документов.

Здесь представлен SVG-код для изображения нескольких вишенок с добавлением классов для расширенной навигации:

<svg viewBox="0 0 215 274">
    <g>
        <path fill="none" stroke="#7AA20D" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" d="M54.817,169.848c0,0,77.943-73.477,82.528-104.043c4.585-30.566,46.364,91.186,27.512,121.498" />
        <path fill="#7AA20D" stroke="#7AA20D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M134.747,62.926c-1.342-6.078,0.404-12.924,5.762-19.681c11.179-14.098,23.582-17.539,40.795-17.846 c0.007,0,22.115-0.396,26.714-20. 031c-2.859,12.205-5.58,24.168-9.774,36.045c-6.817,19.301-22.399,48.527-47.631,38.028 C141.823,75.784,136.277,69.855,134.747,62.926z" />
    </g>
    <g>
        <path fill="#ED6E46" stroke="#ED6E46" stroke-width="12" d="M164.836,193.136 c1.754-0.12,3.609-0.485,5.649-1.148c8.512-2.768,21.185-6.985,28.181,3.152c15.076,21.845,5.764,55.876-18.387,66.523 c-27.61,12.172-58.962-16.947-56.383-45.005c1.266-13.779,8.163-35.95,26.136-27.478   C155.46,191.738,159.715,193.485,164.836,193.136z" />
        <path fill="#ED6E46" stroke="#ED6E46" stroke-width="12" d="M55.99,176.859 c1.736,0.273,3.626,0.328,5.763,0.135c8.914-0.809,22.207-2.108,26.778,9.329c9.851,24.647-6.784,55.761-32.696,60.78 c-29.623,5.739-53.728-29.614-44.985-56.399c4.294-13.154,15.94-33.241,31.584-20.99C47.158,173.415,50.919,176.062,55.99,176.859z" />
    </g>
</svg>

Атрибуты в элементе svg определяют рабочую область или «холст» для графики. Листочек и черешки находятся в одном элементе <g> (группе), а вишенки в другом. Строка числовых значений определяет контур графики, а атрибуты fill и stroke устанавливают цвет для фона и границ.

Прежде чем поместить этот код в HTML, его можно скопировать и пропустить через SVG-оптимизатор, который в свою очередь поможет устранить лишний код, пробелы и значительно сократить размер файла. SVG-оптимизатор Питера Коллингриджа или SVGO — очень полезные в этом плане инструменты.

Публикуется под лицензией Attribution-NonCommercial-ShareAlike 4.0

P.S. Это тоже может быть интересно:

26 HTML и CSS

Коллекция бесплатных HTML и CSS

и

                                
                                
                                
                                <голова>
                                    <мета-кодировка="utf-8">
                                    
                                
                                
                                <тело>
                                    

                                        Смотрите ниже, я буду прикреплять изображение ноутбука. 
                                    
                                    <рисунок>