{"id":468283,"date":"2025-07-23T15:00:13","date_gmt":"2025-07-23T15:00:13","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=468283"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=468283","title":{"rendered":"<span>\u0414\u0440\u0443\u0436\u0435\u0441\u043a\u043e\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u043e \u0441 SVG<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>SVG \u2013 \u043e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0421 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0443 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u042d\u0442\u043e \u043d\u0435\u043e\u0442\u044a\u0435\u043c\u043b\u0435\u043c\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043c\u043e\u0435\u0433\u043e \u0441\u0442\u0435\u043a\u0430.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u043e\u0441\u043d\u043e\u0432\u0430\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043b\u043e\u0436\u0438\u0442\u044c \u043f\u0440\u043e\u0447\u043d\u044b\u0439 \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0433\u043e \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f. \u042f \u043f\u043e\u043a\u0430\u0436\u0443 \u0432\u0430\u043c, \u043f\u043e\u0447\u0435\u043c\u0443 SVG \u0442\u0430\u043a \u0445\u043e\u0440\u043e\u0448, \u0438 \u043f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u0444\u0438\u0448\u043a\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u044f\u043c\u043e \u0441\u0435\u0439\u0447\u0430\u0441.<\/p>\n<p>\u0414\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0437\u043d\u0430\u043d\u0438\u0439 \u0438 \u043e\u043f\u044b\u0442\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 SVG, \u043d\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432\u044b \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 \u043e\u0441\u043d\u043e\u0432\u0430\u043c\u0438 HTML\/CSS\/JS.<\/p>\n<h2>Hello, SVG<\/h2>\n<p><a href=\"https:\/\/ru.wikipedia.org\/wiki\/SVG\" rel=\"noopener noreferrer nofollow\">SVG<\/a> (\u043e\u0442 \u0430\u043d\u0433\u043b. scalable vector graphics \u2013 \u043c\u0430\u0441\u0448\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u0430\u044f \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u0430\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0430) \u2013 \u043f\u043e \u0441\u0443\u0442\u0438, \u0444\u043e\u0440\u043c\u0430\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043d\u0430\u0440\u044f\u0434\u0443 \u0441 <code>.jpg<\/code> \u0438\u043b\u0438 <code>.gif<\/code>. SVG \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c \u0432 \u0442\u0435\u0433 <code>&lt;img&gt;<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>src<\/code>:<\/p>\n<pre><code>&lt;img   alt=\"return to homepage\"   src=\"\/images\/home.svg\" \/&gt; <\/code><\/pre>\n<p>\u042d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u2013 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043d\u043e \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0430\u044f \u043c\u0430\u0433\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <em>\u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435<\/em> svg.<\/p>\n<p>\u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <code>.jpg<\/code> \u2013 \u0434\u0432\u043e\u0438\u0447\u043d\u044b\u0435; \u0435\u0441\u043b\u0438 \u043f\u043e\u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0438\u0445 \u0432 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435, \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u043a\u0443\u0447\u0443 \u043d\u0435\u0432\u043d\u044f\u0442\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430. SVG, \u043d\u0430\u043f\u0440\u043e\u0442\u0438\u0432, \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 XML, \u043a\u0430\u043a \u0438 HTML! \u0412\u043c\u0435\u0441\u0442\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u043e\u0432 R\/G\/B \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u044f, SVG \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0430\u0431\u043e\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439 \u043f\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0435, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u041c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u044b\u0440\u043e\u0439 SVG \u043f\u0440\u044f\u043c\u043e \u0432 HTML-\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442:<\/p>\n<pre><code>&lt;style&gt; body {   margin: 0;   padding: 0;   background: hsl(210deg 15% 6%);   color: white; } .wrapper {   display: flex;   flex-direction: column;   justify-content: center;   align-items: center;   gap: 16px;   height: 100vh; } svg {   display: block;   outline: 1px solid hsl(210deg 15% 30%); } &lt;\/style&gt;  &lt;div class=\"wrapper\"&gt;   &lt;p&gt;     Check out this SVG:   &lt;\/p&gt;    &lt;svg width=\"100\" height=\"100\"&gt;     &lt;circle       fill=\"hotpink\"       r=\"30\"       cx=\"50\"       cy=\"50\"     \/&gt;   &lt;\/svg&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/5cf\/4bb\/a93\/5cf4bba936f909cdc47f8e01e834b7cd.png\" alt=\"alt text\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/\/post_images\/5cf\/4bb\/a93\/5cf4bba936f909cdc47f8e01e834b7cd.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/5cf\/4bb\/a93\/5cf4bba936f909cdc47f8e01e834b7cd.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>alt text<\/figcaption><\/div>\n<\/figure>\n<p>\u0412 HTML \u043d\u0430\u043c \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043d\u0430\u0431\u043e\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0441 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u043c: \u0430\u0431\u0437\u0430\u0446\u044b (<code>&lt;p&gt;<\/code>), \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 (<code>&lt;h1&gt;<\/code>) \u0438 \u0441\u043f\u0438\u0441\u043a\u0438 (<code>&lt;ol&gt;<\/code>) \u2014 \u0442\u0435 \u0436\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0447\u0442\u043e \u0438 \u0432 Microsoft Word. SVG \u2014 \u044d\u0442\u043e \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u043d\u043e \u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0434\u043b\u044f \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <code>&lt;circle&gt;<\/code>, <code>&lt;polygon&gt;<\/code> \u0438 <code>&lt;path&gt;<\/code>.<\/p>\n<p>\u0421\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435, \u0447\u0442\u043e SVG-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u2013 \u043f\u043e\u043b\u043d\u043e\u043f\u0440\u0430\u0432\u043d\u044b\u0435 \u0447\u043b\u0435\u043d\u044b <a href=\"https:\/\/ru.wikipedia.org\/wiki\/Document_Object_Model\" rel=\"noopener noreferrer nofollow\">DOM<\/a> (\u043e\u0442 \u0430\u043d\u0433\u043b. Document Object Model \u2013 \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430). \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS \u0438 JavaScript \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f SVG-\u0443\u0437\u043b\u043e\u0432, \u043a\u0430\u043a \u0435\u0441\u043b\u0438 \u0431\u044b \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n<p>\u041c\u043d\u043e\u0433\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b SVG, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0446\u0432\u0435\u0442 \u043a\u0440\u0443\u0433\u0430 (<code>fill<\/code>) \u0438 \u0440\u0430\u0434\u0438\u0443\u0441 (<code>r<\/code>), \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0438\u0445 \u0432 CSS \u0438 \u0434\u0430\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS-\u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438!<\/p>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 SVG \u0442\u0430\u043a\u0438\u043c \u043c\u043e\u0449\u043d\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c. \u042d\u0442\u043e \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f HTML, \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u043d\u0438\u044f CSS\/JS, \u0447\u0442\u043e\u0431\u044b \u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0445 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u044b\u043c\u0438.<\/p>\n<p>\u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043d\u0435\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c, \u043d\u043e \u044f \u0447\u0430\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u044e \u0441\u0432\u043e\u0438 SVG-\u0444\u0430\u0439\u043b\u044b \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430, \u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0435 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0430, \u0442\u0430\u043a\u043e\u0435 \u043a\u0430\u043a Illustrator \u0438\u043b\u0438 Figma. \u0424\u043e\u0442\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 SVG, \u043d\u043e, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043e\u043d\u0438 \u0432\u0441\u0451 \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u044e\u0442 \u0432 \u043e\u0434\u0438\u043d <code>&lt;path&gt;<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0447\u0442\u043e, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0441\u0432\u043e\u0434\u0438\u0442 \u043d\u0430 \u043d\u0435\u0442 \u0441\u0430\u043c\u043e\u0435 \u043a\u0440\u0443\u0442\u043e\u0435 \u0432 SVG. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0432\u044b\u0431\u043e\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c. \u0417\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u0435\u0435 \u0434\u0435\u043b\u0430\u0442\u044c SVG \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u041f\u041e. \u041d\u043e \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u043f\u043e\u043a\u0430\u0437\u0430\u043b \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u0432\u044b\u0448\u0435, \u044f \u0434\u0443\u043c\u0430\u044e, \u043f\u0440\u043e\u0449\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0432\u0440\u0443\u0447\u043d\u0443\u044e.<\/p>\n<h2>\u0411\u0430\u0437\u043e\u0432\u044b\u0435 \u0444\u0438\u0433\u0443\u0440\u044b<\/h2>\n<p>\u041a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u0432\u044b\u0448\u0435, SVG \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043e\u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. \u0412\u043c\u0435\u0441\u0442\u043e <code>&lt;div&gt;<\/code> \u0438 <code>&lt;button&gt;<\/code> \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0444\u0438\u0433\u0443\u0440\u044b \u0442\u0438\u043f\u0430 <code>&lt;circle&gt;<\/code> \u0438 <code>&lt;polygon&gt;<\/code>. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0438\u0445.<\/p>\n<h3>\u041b\u0438\u043d\u0438\u0438<\/h3>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0441\u0430\u043c\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0444\u0438\u0433\u0443\u0440\u0430 <code>&lt;line&gt;<\/code>:<\/p>\n<pre><code>&lt;svg width=\"280\" height=\"280\"&gt;   &lt;line     x1=\"80\"     y1=\"80\"     x2=\"200\"     y2=\"200\"     stroke=\"oklch(0.9 0.3 164)\"     stroke-width=\"5\"   \/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/a70\/4a9\/d58\/a704a9d584f5060bdda454bdcf4bbed3.png\" alt=\"line SVG\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/\/post_images\/a70\/4a9\/d58\/a704a9d584f5060bdda454bdcf4bbed3.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/a70\/4a9\/d58\/a704a9d584f5060bdda454bdcf4bbed3.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>line SVG<\/figcaption><\/div>\n<\/figure>\n<p>\u042d\u0442\u043e \u0442\u0430\u043a\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0432\u0435\u0449\u044c \u0434\u043b\u044f SVG, \u043d\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u0434\u043b\u044f HTML. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0434\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u043b\u0438\u043d\u0438\u044e \u0432 HTML \u2014 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0434\u043b\u0438\u043d\u043d\u044b\u0439 \u0442\u043e\u043d\u043a\u0438\u0439 \u0443\u0437\u0435\u043b DOM \u0438 \u043f\u043e\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0435\u0433\u043e, \u0447\u0442\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043b\u043e\u0436\u043d\u0443\u044e \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443, \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u0430 \u043b\u0438\u043d\u0438\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u043b\u0430\u0441\u044c \u0438 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u043b\u0430\u0441\u044c \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445.<\/p>\n<p>\u0412 SVG \u043b\u0438\u043d\u0438\u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e. \u041c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 (<code>x1<\/code> \u0438 <code>y1<\/code>) \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 (<code>x2<\/code> \u0438 <code>y2<\/code>), \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u0440\u044f\u043c\u0443\u044e \u043b\u0438\u043d\u0438\u044e \u043c\u0435\u0436\u0434\u0443 \u044d\u0442\u0438\u043c\u0438 \u0434\u0432\u0443\u043c\u044f \u0442\u043e\u0447\u043a\u0430\u043c\u0438!<\/p>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <code>&lt;line&gt;<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u044b. \u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u043d\u0438\u044e, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0435\u0439 \u0446\u0432\u0435\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>stroke<\/code>. \u042f \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <code>stroke-width<\/code>, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043b\u0438\u043d\u0438\u044e \u0442\u043e\u043b\u0449\u0435. <code>stroke<\/code> \u0438 <code>stroke-width<\/code> \u2013 \u043f\u0440\u0438\u043c\u0435\u0440\u044b <strong>\u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432<\/strong>, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 x1\/y1\/x2\/y2, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u0445 \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u0434\u0430\u043b\u0435\u0435 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435.<\/p>\n<h3>\u041f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438<\/h3>\n<p>\u041f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043f\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u043c\u0443 \u043b\u0435\u0432\u043e\u043c\u0443 \u0443\u0433\u043b\u0443, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u043c\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>x<\/code> \u0438 <code>y<\/code>. \u042d\u0442\u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u043e\u0442\u0441\u0447\u0435\u0442\u0430, \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u044b\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f <code>width<\/code> \u0438 <code>height<\/code>:<\/p>\n<pre><code>&lt;svg width=\"300\" height=\"300\"&gt;   &lt;rect     x=\"60\"     y=\"100\"     width=\"180\"     height=\"100\"     fill=\"none\"     stroke=\"oklch(0.9 0.3 164)\"     stroke-width=\"5\"   \/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/a75\/a42\/f2e\/a75a42f2e4d7e64b0faa12ec9c0180f9.png\" alt=\"\u041f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a SVG\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/\/post_images\/a75\/a42\/f2e\/a75a42f2e4d7e64b0faa12ec9c0180f9.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/a75\/a42\/f2e\/a75a42f2e4d7e64b0faa12ec9c0180f9.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a SVG<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u044d\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 a <code>&lt;div&gt;<\/code> \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <code>border<\/code>, \u043d\u043e \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u043b\u0438\u0447\u0438\u0439.<\/p>\n<p>\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043e\u0431\u0432\u043e\u0434\u043a\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u043a\u043e\u043d\u0442\u0443\u0440\u0430, \u0430 \u043d\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u043b\u0438 \u0441\u043d\u0430\u0440\u0443\u0436\u0438. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0438 <code>stroke-width<\/code>:<\/p>\n<pre><code>&lt;svg width=\"300\" height=\"300\"&gt;   &lt;rect     x=\"80\"     y=\"100\"     width=\"140\"     height=\"100\"     stroke-width=\"50\"     stroke=\"green\"     fill=\"none\"   \/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/dd1\/58e\/2d2\/dd158e2d2c25f1b4185d1c248aaca542.png\" alt=\"\u041e\u0431\u0432\u043e\u0434\u043a\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 SVG\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/\/post_images\/dd1\/58e\/2d2\/dd158e2d2c25f1b4185d1c248aaca542.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/dd1\/58e\/2d2\/dd158e2d2c25f1b4185d1c248aaca542.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041e\u0431\u0432\u043e\u0434\u043a\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 SVG<\/figcaption><\/div>\n<\/figure>\n<p>\u042d\u0442\u043e \u0441\u043f\u0440\u0430\u0432\u0435\u0434\u043b\u0438\u0432\u043e \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0444\u0438\u0433\u0443\u0440, \u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f <code>&lt;rect&gt;<\/code>. \u0418, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u044d\u0442\u043e \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c: \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u0434\u043e\u043b\u0436\u043d\u0430 \u043b\u0438 \u043e\u0431\u0432\u043e\u0434\u043a\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0444\u0438\u0433\u0443\u0440\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u043b\u0438 \u0441\u043d\u0430\u0440\u0443\u0436\u0438.<\/p>\n<p><strong>\u0415\u0449\u0435 \u043e\u0434\u0438\u043d \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/strong>: \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442, \u0435\u0441\u043b\u0438 \u043c\u044b \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u043c \u043b\u0438\u0431\u043e <code>width<\/code>, \u043b\u0438\u0431\u043e <code>height<\/code> \u0434\u043e 0. \u0412\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u043e\u0436\u0438\u0434\u0430\u0442\u044c, \u0447\u0442\u043e \u043e\u043d \u0441\u0442\u0430\u043d\u0435\u0442 \u043f\u0440\u044f\u043c\u043e\u0439 \u043b\u0438\u043d\u0438\u0435\u0439, \u043d\u043e \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0432\u0441\u044f \u0444\u0438\u0433\u0443\u0440\u0430 \u0438\u0441\u0447\u0435\u0437\u043d\u0435\u0442.<\/p>\n<p>\u0412 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 SVG \u0442\u0430\u043a\u0438\u0435 \u0444\u0438\u0433\u0443\u0440\u044b \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u00ab\u0432\u044b\u0440\u043e\u0436\u0434\u0435\u043d\u043d\u044b\u043c\u0438\u00bb (\u0447\u0442\u043e, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0433\u0440\u0443\u0431\u043e!). \u0415\u0441\u043b\u0438 \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u0430\u044f \u0444\u0438\u0433\u0443\u0440\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>&lt;rect&gt;<\/code> \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043e\u0434\u043d\u043e\u043c \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0438, \u043e\u043d\u0430 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u043e\u0439 \u0438 \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f. \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0431\u044b\u043b\u043e \u043d\u0435\u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u043c: \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0432\u0441\u0451 \u0435\u0449\u0451 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u0438 \u043e\u0434\u043d\u043e\u043c\u0435\u0440\u043d\u044b\u0435 \u0444\u0438\u0433\u0443\u0440\u044b, \u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u2014 \u043d\u0435\u0442. \u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u0432\u0441\u0435 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0442 \u044d\u0442\u043e\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438.<\/p>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043a\u0440\u0443\u0433\u043b\u0438\u0442\u044c \u0443\u0433\u043b\u044b \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>rx<\/code> \u0438 <code>ry<\/code>, \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e <code>border-radius<\/code> \u0432 HTML:<\/p>\n<pre><code>&lt;svg width=\"340\" height=\"340\"&gt;   &lt;rect     x=\"80\"     y=\"100\"     width=\"500\"     height=\"500\"     rx=\"100\"     ry=\"50\"     stroke=\"green\"     stroke-width=\"5\"     fill=\"none\"   \/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/6c0\/2d6\/60d\/6c02d660d5a2df58e5ab68f466770b83.png\" alt=\"\u0421\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435 \u0443\u0433\u043b\u043e\u0432 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/\/post_images\/6c0\/2d6\/60d\/6c02d660d5a2df58e5ab68f466770b83.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/6c0\/2d6\/60d\/6c02d660d5a2df58e5ab68f466770b83.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435 \u0443\u0433\u043b\u043e\u0432 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430<\/figcaption><\/div>\n<\/figure>\n<h3>\u041e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438<\/h3>\n<p>\u0420\u0430\u0437\u043c\u0435\u0440 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0435\u0435 \u0440\u0430\u0434\u0438\u0443\u0441\u043e\u043c <code>r<\/code>. \u041c\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044f \u0446\u0435\u043d\u0442\u0440 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>cx<\/code> \u0438 <code>cy<\/code>:<\/p>\n<pre><code>&lt;svg width=\"280\" height=\"280\"&gt;   &lt;circle     cx=\"140\"     cy=\"140\"     r=\"70\"     fill=\"none\"     stroke=\"oklch(0.9 0.3 164)\"     stroke-width=\"5\"   \/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/c92\/8fd\/cae\/c928fdcae086e75cbbf128c3aa86f7a6.png\" alt=\"\u041e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u044c SVG\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/\/post_images\/c92\/8fd\/cae\/c928fdcae086e75cbbf128c3aa86f7a6.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/c92\/8fd\/cae\/c928fdcae086e75cbbf128c3aa86f7a6.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u044c SVG<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0430\u043a \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 <code>&lt;rect&gt;<\/code>, \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u0441\u0447\u0435\u0437\u043d\u0435\u0442, \u0435\u0441\u043b\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0440\u0430\u0434\u0438\u0443\u0441 0.<\/p>\n<h3>\u042d\u043b\u043b\u0438\u043f\u0441\u044b<\/h3>\n<p><code>&lt;ellipse&gt;<\/code> \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e \u0438 <code>&lt;circle&gt;<\/code>, \u043d\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0435\u0433\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0430\u0434\u0438\u0443\u0441\u043e\u0432. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0432\u0430\u043b\u044b:<\/p>\n<pre><code>&lt;svg width=\"300\" height=\"300\"&gt;   &lt;ellipse     cx=\"150\"     cy=\"150\"     rx=\"75\"     ry=\"50\"     fill=\"none\"     stroke=\"oklch(0.9 0.3 164)\"     stroke-width=\"5\"   \/&gt; &lt;\/svg&gt;  <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/add\/a47\/b5b\/adda47b5b1b0ce5b95b15b9dfc648c98.png\" alt=\"\u042d\u043b\u043b\u0438\u043f\u0441 SVG\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/\/post_images\/add\/a47\/b5b\/adda47b5b1b0ce5b95b15b9dfc648c98.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/add\/a47\/b5b\/adda47b5b1b0ce5b95b15b9dfc648c98.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u042d\u043b\u043b\u0438\u043f\u0441 SVG<\/figcaption><\/div>\n<\/figure>\n<h3>\u041c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438<\/h3>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;polygon&gt;<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0444\u0438\u0433\u0443\u0440\u044b \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u044d\u0442\u043e\u0439:<\/p>\n<pre><code>&lt;svg width=\"300\" height=\"300\"&gt;   &lt;polygon     points=\"       60,100       100,180       140,140       180,180       220,100     \"   \/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/27b\/eab\/a2c\/27beaba2c8d836d25294d5900fa5e492.png\" alt=\"\u041c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a SVG\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/\/post_images\/27b\/eab\/a2c\/27beaba2c8d836d25294d5900fa5e492.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/27b\/eab\/a2c\/27beaba2c8d836d25294d5900fa5e492.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a SVG<\/figcaption><\/div>\n<\/figure>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442 <code>points<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u043e\u0447\u0435\u043a X\/Y; \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0430\u0440\u0438\u0441\u0443\u0435\u0442 \u043b\u0438\u043d\u0438\u044e \u043c\u0435\u0436\u0434\u0443 \u043a\u0430\u0436\u0434\u043e\u0439 \u0442\u043e\u0447\u043a\u043e\u0439 \u0438 \u043e\u0442 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u043a \u043f\u0435\u0440\u0432\u043e\u0439.<\/p>\n<p>\u042d\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043c\u043d\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u043c, \u043a\u043e\u0433\u0434\u0430 \u044f \u0438\u0437\u0443\u0447\u0430\u043b SVG. \u0412 \u043c\u043e\u0451\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0442\u0435\u0440\u043c\u0438\u043d \u00ab\u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u00bb \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u0447\u0435\u043c\u0443-\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c\u0443: \u043a \u0444\u0438\u0433\u0443\u0440\u0430\u043c \u0441 \u0432\u0440\u0430\u0449\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0438\u043c\u043c\u0435\u0442\u0440\u0438\u0435\u0439, \u0442\u0430\u043a\u0438\u043c \u043a\u0430\u043a \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438, \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u044b, \u0448\u0435\u0441\u0442\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438 \u0438 \u0432\u043e\u0441\u044c\u043c\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438:<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/986\/55e\/666\/98655e66699cc8a65e5189dde4935c96.png\" alt=\"\u0421\u0438\u043c\u043c\u0435\u0442\u0440\u0438\u0447\u043d\u044b\u0439 \u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a SVG\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/\/post_images\/986\/55e\/666\/98655e66699cc8a65e5189dde4935c96.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/986\/55e\/666\/98655e66699cc8a65e5189dde4935c96.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u0438\u043c\u043c\u0435\u0442\u0440\u0438\u0447\u043d\u044b\u0439 \u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a SVG<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u044d\u0442\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 (\u0440\u0430\u0432\u043d\u043e\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435) \u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438. \u041e\u043d\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e\u0434\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u0431\u043e\u043b\u0435\u0435 \u0448\u0438\u0440\u043e\u043a\u043e\u0433\u043e \u043c\u0438\u0440\u0430 \u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432.<\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0442\u0440\u0438\u0433\u043e\u043d\u043e\u043c\u0435\u0442\u0440\u0438\u044f. \u042d\u0442\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u0437\u0430 \u0440\u0430\u043c\u043a\u0438 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438, \u043d\u043e \u044f \u0440\u0430\u0437\u043c\u0435\u0449\u0443 \u0440\u0430\u0441\u0447\u0451\u0442\u044b, \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435:<\/p>\n<pre><code>&lt;style&gt;   html {   display: grid;   place-content: center;   height: 100vh;   background: hsl(210deg 15% 6%);   }   svg {     outline: 1px solid hsl(210deg 15% 30%);   } &lt;\/style&gt;  &lt;svg class=\"parent-svg\" width=\"280\" height=\"280\"&gt;   &lt;polygon     class=\"mister-polygon\"     stroke=\"goldenrod\"     stroke-width=\"5\"     fill=\"none\"   \/&gt; &lt;\/svg&gt;  &lt;script&gt; const svg = document.querySelector('.parent-svg'); const polygon = document.querySelector('.mister-polygon');  \/\/ \u0438\u0437\u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u044d\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f: const numOfSides = 8; const radius = 80;  function drawPolygon() {   const svgWidth = Number(svg.getAttribute('width'));   const svgHeight = Number(svg.getAttribute('height'));   const cx = svgWidth \/ 2;   const cy = svgHeight \/ 2;      const points = range(numOfSides).map((index) =&gt; {    \/\/ \u0421\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0447\u0435\u0442\u043d\u044b\u0435   \/\/ \u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0448\u0435\u0441\u0442\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438\/\u0432\u043e\u0441\u044c\u043c\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438, \u0431\u044b\u043b\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u044b \u043f\u043b\u043e\u0441\u043a\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u043e\u0439 \u0432\u0432\u0435\u0440\u0445, \u0430 \u043d\u0435 \u043e\u0441\u0442\u0440\u043e\u0439.   \/\/ \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u00ab0\u00bb, \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u044d\u0442\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e.     const rotationOffset = numOfSides % 2 === 0       ? Math.PI \/ numOfSides       : 0;          const angle =       (index * 2 * Math.PI) \/ numOfSides -       Math.PI \/ 2 +       rotationOffset;          const x = cx + radius * Math.cos(angle);     const y = cy + radius * Math.sin(angle);     return `${x},${y}`;   });    polygon.setAttribute(     'points',     points.join(' ')   ); }  drawPolygon(); &lt;\/script&gt; <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/f8d\/efd\/89a\/f8defd89ad9a053e2f09d69de8730195.png\" alt=\"\u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0432\u043e\u0441\u044c\u043c\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 JavaScript\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/\/post_images\/f8d\/efd\/89a\/f8defd89ad9a053e2f09d69de8730195.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/f8d\/efd\/89a\/f8defd89ad9a053e2f09d69de8730195.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0432\u043e\u0441\u044c\u043c\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 JavaScript<\/figcaption><\/div>\n<\/figure>\n<p>\u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u0432\u044b\u0448\u0435 \u043a\u043e\u0434\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0437\u0430\u043f\u044f\u0442\u044b\u0435 \u0438 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u044b \u0441\u0442\u0440\u043e\u043a, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0442\u043e\u0447\u0435\u043a \u0447\u0438\u0442\u0430\u0435\u043c\u044b\u043c\u0438:<\/p>\n<pre><code>&lt;polygon   points=\"     60,100     100,180     140,140     180,180     220,100   \" \/&gt; <\/code><\/pre>\n<p>\u042d\u0442\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u044b \u0441\u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f \u00ab\u043b\u0438\u0448\u043d\u0438\u043c\u0438\u00bb \u0432 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 SVG. \u041e\u043d\u0438 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b, \u043d\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u044b. \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e SVG-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u0435 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u0436\u0438\u0437\u043d\u0438, \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<pre><code>&lt;polygon points=\"60 100 100 180 140 140 180 180 220 100\" \/&gt; <\/code><\/pre>\n<p>\u0420\u0430\u043d\u044c\u0448\u0435 \u043f\u043e\u0434\u043e\u0431\u043d\u0430\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043c\u043e\u0433\u043b\u0430 \u0434\u0430\u0442\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0432\u044b\u0438\u0433\u0440\u044b\u0448 \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u043e\u0432. \u041e\u0434\u043d\u0430\u043a\u043e \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0441\u0436\u0430\u0442\u0438\u0435 gzip, \u0430 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u043f\u044f\u0442\u044b\u0445 \u0438 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u043e\u0432 \u0441\u0442\u0440\u043e\u043a \u043d\u0435 \u043e\u043a\u0430\u0436\u0443\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u043b\u0438\u044f\u043d\u0438\u044f \u043d\u0430 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430.<\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043d\u0430\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0432\u0430\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0443\u0434\u043e\u0431\u043d\u043e\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 \u0432\u0430\u0448\u0438 SVG-\u0444\u0430\u0439\u043b\u044b! \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0437\u0430\u043c\u0435\u0442\u044f\u0442, \u043d\u043e \u0434\u0440\u0443\u0433\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0432 \u0432\u0430\u0448\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 (\u0438 \u0432\u044b \u0441\u0430\u043c\u0438 \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c) \u0432\u044b\u0438\u0433\u0440\u0430\u044e\u0442 \u043e\u0442 \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u044b\u0445 SVG-\u0444\u0430\u0439\u043b\u043e\u0432.<\/p>\n<p>\u0415\u0441\u0442\u044c \u0435\u0449\u0451 \u043f\u0430\u0440\u0430 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0445 \u0444\u0438\u0433\u0443\u0440, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>&lt;polyline&gt;<\/code> \u0438 <code>&lt;text&gt;<\/code>, \u043d\u043e, \u0434\u0443\u043c\u0430\u044e, \u043c\u044b \u0443\u0436\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u044f. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c.<\/p>\n<h2>\u041c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u044b\u0435 SVG-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/h2>\n<p>\u0414\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u00ab\u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0435\u00bb \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043d\u0430\u0448\u0438 SVG-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u043c\u0435\u0442\u044c \u0441\u0442\u0440\u043e\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440, \u0438\u043d\u0430\u0447\u0435 \u0432\u0441\u0451 \u0441\u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f:<\/p>\n<pre><code>&lt;svg width=\"180\" height=\"220\"&gt;   &lt;circle     cx=\"150\"     cy=\"110\"     r=\"60\"     stroke=\"var(--gold)\"     stroke-width=\"10\"   \/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/431\/d7f\/5f4\/431d7f5f45ed13e7ced2e203ef5d7066.png\" alt=\"\u041e\u0431\u0440\u0435\u0437\u0430\u043d\u043d\u0430\u044f \u043f\u043e \u0433\u0440\u0430\u043d\u0438\u0446\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430-\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0444\u0438\u0433\u0443\u0440\u0430\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/\/post_images\/431\/d7f\/5f4\/431d7f5f45ed13e7ced2e203ef5d7066.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/431\/d7f\/5f4\/431d7f5f45ed13e7ced2e203ef5d7066.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041e\u0431\u0440\u0435\u0437\u0430\u043d\u043d\u0430\u044f \u043f\u043e \u0433\u0440\u0430\u043d\u0438\u0446\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430-\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f \u0444\u0438\u0433\u0443\u0440\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u043b\u0436\u043d\u0430 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u0432 \u0446\u0435\u043d\u0442\u0440\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 300 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u041e\u0434\u043d\u0430\u043a\u043e \u043f\u0440\u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0438 \u0448\u0438\u0440\u0438\u043d\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u044c \u043d\u0435 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442\u0441\u044f, \u0430 \u043e\u0431\u0440\u0435\u0437\u0430\u0435\u0442\u0441\u044f. \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0438\u043d\u0430\u0447\u0435! \u041f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 <code>.jpg<\/code> \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n<p>\u041e\u0434\u043d\u0438\u043c \u0438\u0437 (\u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u0430\u0447\u043d\u044b\u0445) \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0435\u0440\u0435\u0441\u0447\u0435\u0442 \u0432\u0441\u0435\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0448\u0438\u0440\u0438\u043d\u044b. \u042f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0432 JavaScript, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438 \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0438\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u043c\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u044b \u0432 300 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0435\u0441\u043b\u0438 \u0448\u0438\u0440\u0438\u043d\u0430 \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 150 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u0432\u0441\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0443\u043c\u043d\u043e\u0436\u0430\u044e\u0442\u0441\u044f \u043d\u0430 0,5.<\/p>\n<p>\u042d\u0442\u043e\u0442 \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u043e \u043e\u043d \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0439, \u0434\u0430\u0436\u0435 \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0444\u0438\u0433\u0443\u0440\u044b, \u043a\u0430\u043a \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u0448\u0435. \u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u0435\u0441\u0442\u044c \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043b\u0443\u0447\u0448\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443.<\/p>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435:<\/p>\n<pre><code>&lt;svg   width=\"165\"   viewBox=\"0 0 300 220\" &gt;   &lt;circle     cx=\"150\"     cy=\"110\"     r=\"60\"     stroke=\"var(--gold)\"     stroke-width=\"10\"   \/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/667\/da5\/64b\/667da564bee5b4f15be61168f4ef2ff3.png\" alt=\"ViewBox\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/\/post_images\/667\/da5\/64b\/667da564bee5b4f15be61168f4ef2ff3.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/667\/da5\/64b\/667da564bee5b4f15be61168f4ef2ff3.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>ViewBox<\/figcaption><\/div>\n<\/figure>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442 <code>viewBox<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044e\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442. \u041f\u0440\u0438 \u0435\u0433\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b <code>&lt;circle&gt;<\/code>, <code>&lt;rect&gt;<\/code> \u0438 <code>&lt;polygon&gt;<\/code> \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u0443\u0442 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 DOM \u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044e\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442.<\/p>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442 <code>viewBox<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0447\u0435\u0442\u044b\u0440\u0435 \u0447\u0438\u0441\u043b\u0430, \u043d\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0447\u0438\u0442\u0430\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u0434\u0432\u0435 \u043f\u0430\u0440\u044b \u043f\u043e \u0434\u0432\u0430 \u0447\u0438\u0441\u043b\u0430.<\/p>\n<p>\u041f\u0435\u0440\u0432\u044b\u0435 \u0434\u0432\u0430 \u0447\u0438\u0441\u043b\u0430 \u0437\u0430\u0434\u0430\u044e\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u0443\u044e \u0447\u0430\u0441\u0442\u044c SVG-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f (\u043f\u043e \u0441\u0443\u0442\u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u043b\u0435\u0432\u043e\u0433\u043e \u0443\u0433\u043b\u0430 \u2013 <em>\u043f\u0440\u0438\u043c. \u043f\u0435\u0440.<\/em>)<\/p>\n<pre><code>&lt;svg   width=\"300\"   height=\"300\"   viewBox=\"0 0 300 300\" &gt;   &lt;rect     x=\"0\"     y=\"0\"     width=\"200\"     height=\"200\"   \/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/e4a\/be3\/3c1\/e4abe33c1ffc2215db9a251f84a3e19c.png\" alt=\"\u041a\u0432\u0430\u0434\u0440\u0430\u0442 200\u0445200 \u0432 \u043f\u043e\u043b\u0435 300\u0445300 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d \u043e\u0442 \u0442\u043e\u0447\u043a\u0438 0;0\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/\/post_images\/e4a\/be3\/3c1\/e4abe33c1ffc2215db9a251f84a3e19c.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/e4a\/be3\/3c1\/e4abe33c1ffc2215db9a251f84a3e19c.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041a\u0432\u0430\u0434\u0440\u0430\u0442 200\u0445200 \u0432 \u043f\u043e\u043b\u0435 300\u0445300 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d \u043e\u0442 \u0442\u043e\u0447\u043a\u0438 0;0<\/figcaption><\/div>\n<\/figure>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 <code>viewBox=\"50 50 300 300\"<\/code>, \u0442\u043e \u0443\u0432\u0438\u0434\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0430\u0441\u0442\u044c \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u043e\u043b\u0435 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0441\u043c\u0435\u0441\u0442\u0438\u043b\u043e\u0441\u044c \u043d\u0430 50 \u0432\u043d\u0438\u0437 \u0438 \u0432\u043f\u0440\u0430\u0432\u043e:<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/738\/c80\/cb0\/738c80cb00ac76560705d4381ac73e64.png\" alt=\"\u0421\u043c\u0435\u0449\u0435\u043d\u0438\u0435 viewBox \u043d\u0430 50 \u0432\u043d\u0438\u0437 \u0438 \u0432\u043f\u0440\u0430\u0432\u043e\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/\/post_images\/738\/c80\/cb0\/738c80cb00ac76560705d4381ac73e64.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/738\/c80\/cb0\/738c80cb00ac76560705d4381ac73e64.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0421\u043c\u0435\u0449\u0435\u043d\u0438\u0435 viewBox \u043d\u0430 50 \u0432\u043d\u0438\u0437 \u0438 \u0432\u043f\u0440\u0430\u0432\u043e<\/figcaption><\/div>\n<\/figure>\n<p>\u041f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 <code>viewBox<\/code> \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 \u0442\u0430\u043a\u043e\u0432\u043e\u0435 \u0443 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 <code>x<\/code>, <code>y<\/code> \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 <code>&lt;rect&gt;<\/code>, \u0442\u043e\u043b\u044c\u043a\u043e <code>x<\/code> \u0438 <code>y<\/code> \u0437\u0430\u0434\u0430\u044e\u0442 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 \u043e\u0442\u0441\u0447\u0435\u0442\u0430 \u0444\u0438\u0433\u0443\u0440\u044b, \u0430 <code>viewBox<\/code> \u0442\u043e\u0447\u043a\u0443 \u043e\u0442\u0441\u0447\u0435\u0442\u0430 \u043f\u043e\u043b\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430. \u2013 <em>\u043f\u0440\u0438\u043c. \u043f\u0435\u0440.<\/em><\/p>\n<p>\u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 HTML-\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 SVG-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0443 SVG \u043d\u0435\u0442 \u043a\u0440\u0430\u0451\u0432. \u0422\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u043d\u0438 \u043f\u0440\u043e\u0441\u0442\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0432\u043e \u0432\u0441\u0435\u0445 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f\u0445 \u043d\u0430 \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0441\u0442\u044c. \u041d\u0438\u0447\u0442\u043e \u043d\u0435 \u043c\u0435\u0448\u0430\u0435\u0442 \u043d\u0430\u043c \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0444\u0438\u0433\u0443\u0440\u0443 \u043d\u0430 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0438 1 000 000 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043e\u0442 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0432 \u043b\u044e\u0431\u043e\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438. <code>viewBox<\/code> \u0440\u0435\u0448\u0430\u0435\u0442, \u043a\u0430\u043a\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u044d\u0442\u043e\u0433\u043e \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044f \u043c\u044b \u0441\u043c\u043e\u0442\u0440\u0438\u043c.<\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u043f\u0430\u0440\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0434\u043b\u044f <code>viewBox<\/code>. \u042d\u0442\u0438 \u0434\u0432\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043d\u0430\u043c \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438:<\/p>\n<pre><code>&lt;svg   width=\"300\"   height=\"300\"   viewBox=\"0 0 200 200\" &gt;   &lt;rect     x=\"0\"     y=\"0\"     width=\"200\"     height=\"200\"   \/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/166\/41f\/003\/16641f00313c1253abe56c52a61873dd.png\" alt=\"\u041a\u0432\u0430\u0434\u0440\u0430\u0442 200\u0445200 \u0432 \u043f\u043e\u043b\u0435 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 200\u0445200\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/\/post_images\/166\/41f\/003\/16641f00313c1253abe56c52a61873dd.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/166\/41f\/003\/16641f00313c1253abe56c52a61873dd.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041a\u0432\u0430\u0434\u0440\u0430\u0442 200\u0445200 \u0432 \u043f\u043e\u043b\u0435 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 200\u0445200<\/figcaption><\/div>\n<\/figure>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 <code>viewBox=\"0 0 550 550\"<\/code>, \u0442\u043e \u043c\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043c \u043f\u043e\u043b\u0435 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430:<\/p>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/269\/5b4\/b34\/2695b4b3495a5a5bf1326d8e7a365b93.png\" alt=\"\u041a\u0432\u0430\u0434\u0440\u0430\u0442 200\u0445200 \u0432 \u043f\u043e\u043b\u0435 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 550\u0445550\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/\/post_images\/269\/5b4\/b34\/2695b4b3495a5a5bf1326d8e7a365b93.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/269\/5b4\/b34\/2695b4b3495a5a5bf1326d8e7a365b93.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u041a\u0432\u0430\u0434\u0440\u0430\u0442 200\u0445200 \u0432 \u043f\u043e\u043b\u0435 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 550\u0445550<\/figcaption><\/div>\n<\/figure>\n<p>\u0420\u0430\u0437\u043c\u0435\u0440 SVG-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u2014 \u043e\u043d \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438 <code>width<\/code>\/<code>height<\/code> \u0438\u043b\u0438 CSS. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>\u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u043d\u0430\u0448 SVG-\u0444\u0430\u0439\u043b \u0438\u043c\u0435\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 300 \u043d\u0430 300 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u0415\u0441\u043b\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>viewBox=\"0 0 300 300\"<\/code>, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 1:1 \u043c\u0435\u0436\u0434\u0443 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 DOM (\u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445).<\/p>\n<p>\u041d\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>viewBox=\"0 0 150 150\"<\/code>. SVG \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0438\u043c\u0435\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 300&#215;300 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c 150&#215;150 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043d\u0430\u0448\u0435\u0433\u043e \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u0445\u043e\u043b\u0441\u0442\u0430 SVG. \u042d\u0442\u043e \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u043c\u0430\u0441\u0448\u0442\u0430\u0431 \u0432 2 \u0440\u0430\u0437\u0430, \u0443\u0434\u0432\u0430\u0438\u0432\u0430\u044f \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0438\u0433\u0443\u0440 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0430\u0448\u0435\u0433\u043e SVG.<\/p>\n<p>\u041f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 <code>viewport<\/code> (\u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0438), \u044d\u0442\u043e \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 (<code>Ctrl<\/code> <code>+<\/code>) \u0434\u043b\u044f \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u0434\u043e 200%. \u042d\u0442\u043e \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u043e\u043a\u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0432\u0441\u0451 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u0432 2 \u0440\u0430\u0437\u0430 \u043e\u0442 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430.<\/p>\n<hr\/>\n<p>\u0418\u0442\u0430\u043a, \u043c\u044b \u0443\u0432\u0438\u0434\u0435\u043b\u0438, \u043a\u0430\u043a \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>viewBox<\/code> \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 (\u0438\u0437\u043c\u0435\u043d\u044f\u044f \u043f\u0435\u0440\u0432\u044b\u0435 \u0434\u0432\u0430 \u0447\u0438\u0441\u043b\u0430) \u0438\u043b\u0438 \u0434\u043b\u044f \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f\/\u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430 (\u0438\u0437\u043c\u0435\u043d\u044f\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0434\u0432\u0430 \u0447\u0438\u0441\u043b\u0430).<\/p>\n<p>\u0427\u0435\u0441\u0442\u043d\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u044f \u043d\u0435 \u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u043a\u043e\u0433\u0434\u0430-\u043b\u0438\u0431\u043e \u0434\u0435\u043b\u0430\u043b \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0440\u0435\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0434\u0432\u0438\u0433\u0430 \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f <code>viewBox<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u043c\u043e\u0433\u0443 \u0441\u0435\u0431\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c, \u2014 \u044d\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0433\u0438\u0433\u0430\u043d\u0442\u0441\u043a\u0430\u044f \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0434\u0435\u0442\u0430\u043b\u0435\u0439, \u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u043e \u043d\u0435\u0439, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044f \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u0432 \u0434\u0440\u0443\u0433\u043e\u0439.<\/p>\n<p>\u042f \u043f\u043e\u043a\u0430\u0437\u0430\u043b \u0432\u0430\u043c \u044d\u0442\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043c\u043e\u0447\u044c \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 <code>viewBox<\/code>. \u041d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u043c\u044b \u043e\u0431\u044b\u0447\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>viewBox<\/code> \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u043e\u0441\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 SVG-\u0444\u0430\u0439\u043b\u0430. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 SVG-\u0444\u0430\u0439\u043b \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430\u0445.<\/p>\n<p>\u0412 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u0445, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a <code>.png<\/code>\/<code>.jpg<\/code> , \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0446\u0432\u0435\u0442\u043d\u044b\u0445 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u041c\u0430\u0441\u0448\u0442\u0430\u0431 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u044d\u0442\u0438 \u043f\u0438\u043a\u0441\u0435\u043b\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0432\u0438\u0434\u0438\u043c\u044b\u043c\u0438, \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d. \u041e\u0434\u043d\u0430\u043a\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u043c\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c \u043c\u0430\u0441\u0448\u0442\u0430\u0431 \u0434\u043e \u043b\u044e\u0431\u043e\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043d\u0435 \u0442\u0435\u0440\u044f\u044f \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0440\u0435\u0437\u043a\u043e\u0441\u0442\u0438! \u041d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u044f \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0441\u044c SVG \u0443\u0436\u0435 \u0434\u0435\u0441\u044f\u0442\u044c \u043b\u0435\u0442, \u044f \u0432\u0441\u0435 \u0435\u0449\u0435 \u043d\u0430\u0445\u043e\u0436\u0443 \u044d\u0442\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u043c: \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 10 \u0438\u043b\u0438 100 \u0440\u0430\u0437, \u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0447\u0435\u0442\u043a\u0438\u043c. \ud83d\ude04<\/p>\n<h2>\u041f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b<\/h2>\n<p>\u0412 SVG \u0444\u0438\u0433\u0443\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043b\u0438\u0431\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u044b \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <code>fill<\/code>, \u043b\u0438\u0431\u043e \u043e\u0431\u0432\u0435\u0434\u0435\u043d\u044b \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c <code>stroke<\/code>, \u043b\u0438\u0431\u043e \u0438 \u0442\u043e, \u0438 \u0434\u0440\u0443\u0433\u043e\u0435. \u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>fill<\/code> \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u0441\u0430\u043c\u043e \u0437\u0430 \u0441\u0435\u0431\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u043c\u0441\u044f \u043d\u0430 \u043e\u0431\u0432\u043e\u0434\u043a\u0430\u0445. \u041e\u043d\u0438 \u0447\u0435\u043c-\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0438 \u043d\u0430 HTML-\u0440\u0430\u043c\u043a\u0438, \u043d\u043e \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u0435\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b.<\/p>\n<p>\u0412\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043e\u0431\u0432\u043e\u0434\u043a\u0438:<\/p>\n<pre><code>&lt;style&gt;   circle {     stroke: hsl(45deg 100% 50%);     stroke-width: 6px;     stroke-dasharray: 20, 14;     stroke-linecap: butt;   } &lt;\/style&gt;  &lt;svg viewBox=\"0 0 200 200\"&gt;   &lt;circle cx=\"100\" cy=\"100\" r=\"50\" \/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/76b\/c37\/cd2\/76bc37cd275ee5c6908d245b42740797.png\" alt=\"1\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/\/post_images\/76b\/c37\/cd2\/76bc37cd275ee5c6908d245b42740797.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/76b\/c37\/cd2\/76bc37cd275ee5c6908d245b42740797.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>1<\/figcaption><\/div>\n<\/figure>\n<details class=\"spoiler\">\n<summary>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043e\u0431\u0432\u043e\u0434\u043a\u0438<\/summary>\n<div class=\"spoiler__content\">\n<pre><code>  &lt;style&gt;   circle {     stroke: oklch(0.7 0.2 348);     stroke-width: 16px;     stroke-dasharray: 0, 15;     stroke-linecap: round;   } &lt;\/style&gt;  &lt;svg viewBox=\"0 0 200 200\"&gt;   &lt;circle cx=\"100\" cy=\"100\" r=\"50\" \/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/a23\/bfd\/4e8\/a23bfd4e8a3723f2052c569c3d80c73d.png\" alt=\"2\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/\/post_images\/a23\/bfd\/4e8\/a23bfd4e8a3723f2052c569c3d80c73d.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/a23\/bfd\/4e8\/a23bfd4e8a3723f2052c569c3d80c73d.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>2<\/figcaption><\/div>\n<\/figure>\n<pre><code>&lt;style&gt;   circle {     stroke: oklch(0.9 0.2 179);     stroke-width: 4px;     stroke-dasharray: 0, 10, 25, 10;     stroke-linecap: square;   } &lt;\/style&gt;  &lt;svg viewBox=\"0 0 200 200\"&gt;   &lt;circle cx=\"100\" cy=\"100\" r=\"50\" \/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/e8a\/d1e\/bce\/e8ad1ebce544090bffb74406c84d0b8c.png\" alt=\"3\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/\/post_images\/e8a\/d1e\/bce\/e8ad1ebce544090bffb74406c84d0b8c.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/e8a\/d1e\/bce\/e8ad1ebce544090bffb74406c84d0b8c.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>3<\/figcaption><\/div>\n<\/figure>\n<pre><code>&lt;style&gt;   circle {     stroke: white;     stroke-width: 10px;     stroke-dasharray: 0, 20, 26, 60;     stroke-linecap: round;   } &lt;\/style&gt;  &lt;svg viewBox=\"0 0 200 200\"&gt;   &lt;circle cx=\"100\" cy=\"100\" r=\"50\" \/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<figure class=\"\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/afb\/43e\/5a8\/afb43e5a86438c9a1b9f21db202a9733.png\" alt=\"4\" sizes=\"(max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/\/post_images\/afb\/43e\/5a8\/afb43e5a86438c9a1b9f21db202a9733.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/\/post_images\/afb\/43e\/5a8\/afb43e5a86438c9a1b9f21db202a9733.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>4<\/figcaption><\/div>\n<\/figure>\n<\/div>\n<\/details>\n<p>\u041c\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u0448\u0442\u0440\u0438\u0445\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 <code>stroke<\/code> \u0441\u0432\u043e\u0439\u0441\u0442\u0432 CSS. \u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0434\u0430\u0442\u044c \u0438\u0445 \u043a\u0430\u043a \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b (\u0442\u043e \u0435\u0441\u0442\u044c, \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 <code>stroke-width: 5px<\/code> \u0432 CSS, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0434\u0430\u0442\u044c \u0438\u0445 <code>stroke-width=\"5\"<\/code> \u0432 \u0441\u0430\u043c\u043e\u043c SVG).<\/p>\n<p>\u041a\u0440\u0430\u0442\u043a\u0438\u0439 \u043e\u0431\u0437\u043e\u0440 \u044d\u0442\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432:<\/p>\n<ul>\n<li>\n<p><code>stroke<\/code> \u2014 \u0437\u0430\u0434\u0430\u0451\u0442 \u0446\u0432\u0435\u0442 \u043e\u0431\u0432\u043e\u0434\u043a\u0438. \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <code>transparent<\/code>.<\/p>\n<\/li>\n<li>\n<p><code>stroke-width<\/code> \u2014 \u0437\u0430\u0434\u0430\u0435\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 \u043e\u0431\u0432\u043e\u0434\u043a\u0438 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445.<\/p>\n<\/li>\n<li>\n<p><code>stroke-dasharray<\/code> \u2014 \u0437\u0430\u0434\u0430\u0451\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0430 \u0438 \u0437\u0430\u0437\u043e\u0440 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438. \u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u043c \u0434\u0432\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>10, 20<\/code>), \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c, \u0447\u0442\u043e \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0448\u0442\u0440\u0438\u0445 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 10 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0441 \u0437\u0430\u0437\u043e\u0440\u043e\u043c \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 20 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u041c\u044b \u0434\u0430\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0434\u0430\u0442\u044c \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0439\u0441\u044f \u0443\u0437\u043e\u0440, \u0443\u043a\u0430\u0437\u0430\u0432 \u0431\u043e\u043b\u0435\u0435 \u0434\u0432\u0443\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439.<\/p>\n<\/li>\n<li>\n<p><code>stroke-linecap<\/code> \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0448\u0442\u0440\u0438\u0445. \u0415\u0441\u043b\u0438 \u0442\u043e\u043b\u0449\u0438\u043d\u0430 \u0448\u0442\u0440\u0438\u0445\u0430 0 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u043a\u0440\u0443\u0436\u043e\u0447\u043a\u0438 \u0441 <code>round<\/code>, \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u043a\u0438 \u0441\u043e <code>square<\/code>, \u0438\u043b\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043f\u0440\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, <code>butt<\/code>.<\/p>\n<\/li>\n<\/ul>\n<h3>\u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0448\u0442\u0440\u0438\u0445\u0438<\/h3>\n<p>\u0418\u0442\u0430\u043a, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b SVG, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <code>stroke-width<\/code>, \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 CSS, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445, \u043a\u0430\u043a \u0438 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0432 CSS!<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043f\u043b\u0430\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u043e\u0431\u0432\u043e\u0434\u043a\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 CSS:<\/p>\n<pre><code class=\"css\">circle {   transition:     stroke 1200ms,     stroke-width 900ms,     stroke-dasharray 1500ms,     stroke-linecap 1000ms; } <\/code><\/pre>\n<p>\u0415\u0441\u0442\u044c \u0435\u0449\u0451 \u043e\u0434\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0448\u0442\u0440\u0438\u0445\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438: <code>stroke-dashoffset<\/code>. \u042d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c \u0448\u0442\u0440\u0438\u0445\u0438 \u043f\u043e \u0433\u0440\u0430\u043d\u0438\u0446\u0435 \u0444\u0438\u0433\u0443\u0440\u044b:<\/p>\n<pre><code>&lt;style&gt;   rect {     stroke: oklch(0.9 0.25 164);     stroke-width: 5;     stroke-dasharray: 10, 10;     stroke-dashoffset: 0;     \/* \u043f\u043e\u0438\u0437\u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u044d\u0442\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430,       \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0448\u0442\u0440\u0438\u0445\u043e\u0432 *\/   } &lt;\/style&gt; <\/code><\/pre>\n<p>\u0421 \u044d\u0442\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0451, \u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0448\u0442\u0440\u0438\u0445\u0438 \u0431\u0435\u0433\u0430\u0442\u044c \u043f\u043e \u0433\u0440\u0430\u043d\u0438\u0446\u0435 \u0444\u0438\u0433\u0443\u0440\u044b, \u0441\u043b\u043e\u0432\u043d\u043e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u043c\u0430\u0440\u0430\u0444\u043e\u043d\u0446\u044b:<\/p>\n<pre><code class=\"css\">@keyframes casinoLights {   from {     stroke-dashoffset: 0;   }   to {     stroke-dashoffset: 26;   } }  rect {   stroke-dasharray: 0, 26;   animation:     casinoLights 400ms linear infinite; } <\/code><\/pre>\n<p>\u0414\u043b\u044f \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u043f\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>stroke-dashoffset<\/code>, \u0440\u0430\u0432\u043d\u043e\u0435 \u0441\u0443\u043c\u043c\u0430\u0440\u043d\u043e\u0439 \u0434\u043b\u0438\u043d\u0435 \u0448\u0442\u0440\u0438\u0445\u0430 \u0438 \u0437\u0430\u0437\u043e\u0440\u0430. \u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u044b \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u0435 \u043c\u0435\u0440\u0446\u0430\u043d\u0438\u0435 \u043f\u0440\u0438 \u0437\u0430\u0446\u0438\u043a\u043b\u0438\u0432\u0430\u043d\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u0448\u0442\u0440\u0438\u0445\u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442\u0441\u044f \u043a \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c\u0443 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u044e. \u0422\u0430\u043a\u0436\u0435 \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u0441 \u0440\u0430\u0437\u043d\u043e\u0439 \u0434\u043b\u0438\u043d\u043e\u0439 \u0437\u0430\u0437\u043e\u0440\u0430, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0439\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c\u0441\u044f \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u043f\u0435\u0440\u0438\u043c\u0435\u0442\u0440\u0430 \u0432\u0430\u0448\u0435\u0439 \u0444\u0438\u0433\u0443\u0440\u044b.<\/p>\n<p>\u0410\u043d\u0438\u043c\u0438\u0440\u0443\u044f \u0434\u043b\u0438\u043d\u0443 \u0438 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0448\u0442\u0440\u0438\u0445\u0430, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u0438\u0447\u0443\u0434\u043b\u0438\u0432\u044b\u0439 \u0441\u043f\u0438\u043d\u043d\u0435\u0440:<\/p>\n<pre><code class=\"css\">@keyframes grow {   from {     stroke-dasharray:       calc(var(--circumference) * 0.05),       var(--circumference);   }   to {     stroke-dasharray:       calc(var(--circumference) * 0.25),       var(--circumference);   } }  @keyframes spin {   from {     stroke-dashoffset: 0;   }   to {     stroke-dashoffset:       calc(var(--circumference) * -0.95);   } }  circle {   \/* \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0439\u0442\u0435 \u0434\u043b\u0438\u043d\u0443 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438 \u0432 JS     \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u0435 \u0435\u0435 \u043a\u0430\u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e: *\/   --circumference: 572px;       animation:     grow 1200ms infinite alternate paused,     spin 2400ms infinite alternate paused; } <\/code><\/pre>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0441\u0430\u043c\u044b\u0439 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0439 \u0442\u0440\u044e\u043a \u2014 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438\u043b\u043b\u044e\u0437\u0438\u0438 \u0440\u0438\u0441\u0443\u043d\u043a\u0430 SVG:<\/p>\n<pre><code>&lt;style&gt;   polygon {     stroke-dasharray: 763, 10000;     stroke-dashoffset: 763;     transition:       stroke-dashoffset 3000ms;   } &lt;\/style&gt;  &lt;svg viewBox=\"0 0 280 320\"&gt;   &lt;polygon points=\"...\" \/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<p>\u0425\u0438\u0442\u0440\u043e\u0441\u0442\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043e\u0434\u0438\u043d \u0448\u0442\u0440\u0438\u0445, \u0434\u043b\u0438\u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0440\u0430\u0432\u043d\u0430 \u043f\u0435\u0440\u0438\u043c\u0435\u0442\u0440\u0443 \u0444\u0438\u0433\u0443\u0440\u044b (\u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 763 \u043f\u0438\u043a\u0441\u0435\u043b\u044f), \u0438 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0439 \u0437\u0430\u0437\u043e\u0440 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438 (1000 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439). \u041c\u044b \u0440\u0438\u0441\u0443\u0435\u043c \u0444\u0438\u0433\u0443\u0440\u0443, \u0441\u0434\u0432\u0438\u0433\u0430\u044f \u044d\u0442\u043e\u0442 \u0448\u0442\u0440\u0438\u0445 \u043d\u0430 \u043c\u0435\u0441\u0442\u043e, \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u044f <code>stroke-dashoffset<\/code>.<\/p>\n<p><strong>\u041a\u0430\u043a \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u0434\u043b\u0438\u043d\u0443 \u0444\u0438\u0433\u0443\u0440\u044b?<\/strong> \u0414\u043b\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c JavaScript:<\/p>\n<pre><code>const element = document.querySelector('polygon');  \/\/ \ud83d\udc47 \u042d\u0442\u043e\u0442 \u043c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043c\u0435\u0442\u043e\u0434 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442 \u0434\u043b\u0438\u043d\u0443 \u0444\u0438\u0433\u0443\u0440\u044b: const pathLength = element.getTotalLength();  element.style.strokeDasharray = `${pathLength}, 1000`; <\/code><\/pre>\n<h2>\u0412\u043c\u0435\u0441\u0442\u043e \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f<\/h2>\n<p>\u041e\u0434\u043d\u0430 \u0438\u0437 \u0432\u0430\u0436\u043d\u044b\u0445 \u0442\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u043d\u0435 \u0437\u0430\u0442\u0440\u043e\u043d\u0443\u043b\u0438 \u0432 \u044d\u0442\u043e\u0439 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438, \u2014 \u044d\u0442\u043e <code>&lt;path&gt;<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u042d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u043f\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u0432\u043e\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 <abbr class=\"habraabbr\" title=\"\u041f\u0440\u0435\u0434\u043c\u0435\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u044f\u0437\u044b\u043a, \u043c\u0438\u043d\u0438-\u044f\u0437\u044b\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u0443\u044e\u0449\u0438\u0439\u0441\u044f \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0435\" data-title=\"&lt;p&gt;\u041f\u0440\u0435\u0434\u043c\u0435\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u044f\u0437\u044b\u043a, \u043c\u0438\u043d\u0438-\u044f\u0437\u044b\u043a \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0444\u043e\u043a\u0443\u0441\u0438\u0440\u0443\u044e\u0449\u0438\u0439\u0441\u044f \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0435&lt;\/p&gt;\" data-abbr=\"DSL\">DSL<\/abbr>, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0444\u0438\u0433\u0443\u0440\u044b \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043a\u0440\u0438\u0432\u044b\u0445 \u0411\u0435\u0437\u044c\u0435 \u0438 \u044d\u043b\u043b\u0438\u043f\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0434\u0443\u0433. \u0412 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0438\u0435 \u043d\u0435\u0434\u0435\u043b\u0438 \u044f \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u0443\u044e \u0435\u0449\u0451 \u043e\u0434\u043d\u0443 \u0441\u0442\u0430\u0442\u044c\u044e \u043e\u0431 \u044d\u0442\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435.<\/p>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e, \u0447\u0442\u043e \u0434\u043e\u0447\u0438\u0442\u0430\u043b\u0438 \u0434\u043e \u043a\u043e\u043d\u0446\u0430! \ud83d\udc9a \u0412\u0441\u0435 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435 \u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/930190\/\"> https:\/\/habr.com\/ru\/articles\/930190\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>SVG \u2013 \u043e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0421 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0443 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u042d\u0442\u043e \u043d\u0435\u043e\u0442\u044a\u0435\u043c\u043b\u0435\u043c\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043c\u043e\u0435\u0433\u043e \u0441\u0442\u0435\u043a\u0430.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u043e\u0441\u043d\u043e\u0432\u0430\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043b\u043e\u0436\u0438\u0442\u044c \u043f\u0440\u043e\u0447\u043d\u044b\u0439 \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0433\u043e \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f. \u042f \u043f\u043e\u043a\u0430\u0436\u0443 \u0432\u0430\u043c, \u043f\u043e\u0447\u0435\u043c\u0443 SVG \u0442\u0430\u043a \u0445\u043e\u0440\u043e\u0448, \u0438 \u043f\u043e\u0434\u0435\u043b\u044e\u0441\u044c \u0444\u0438\u0448\u043a\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0432\u044b \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u044f\u043c\u043e \u0441\u0435\u0439\u0447\u0430\u0441.<\/p>\n<p>\u0414\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0437\u043d\u0430\u043d\u0438\u0439 \u0438 \u043e\u043f\u044b\u0442\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 SVG, \u043d\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432\u044b \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 \u043e\u0441\u043d\u043e\u0432\u0430\u043c\u0438 HTML\/CSS\/JS.<\/p>\n<h2>Hello, SVG<\/h2>\n<p><a href=\"https:\/\/ru.wikipedia.org\/wiki\/SVG\" rel=\"noopener noreferrer nofollow\">SVG<\/a> (\u043e\u0442 \u0430\u043d\u0433\u043b. scalable vector graphics \u2013 \u043c\u0430\u0441\u0448\u0430\u0431\u0438\u0440\u0443\u0435\u043c\u0430\u044f \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u0430\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0430) \u2013 \u043f\u043e \u0441\u0443\u0442\u0438, \u0444\u043e\u0440\u043c\u0430\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043d\u0430\u0440\u044f\u0434\u0443 \u0441 <code>.jpg<\/code> \u0438\u043b\u0438 <code>.gif<\/code>. SVG \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c \u0432 \u0442\u0435\u0433 <code>&lt;img&gt;<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>src<\/code>:<\/p>\n<pre><code>&lt;img   alt=\"return to homepage\"   src=\"\/images\/home.svg\" \/&gt; <\/code><\/pre>\n<p>\u042d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u2013 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043d\u043e \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0430\u044f \u043c\u0430\u0433\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <em>\u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435<\/em> svg.<\/p>\n<p>\u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <code>.jpg<\/code> \u2013 \u0434\u0432\u043e\u0438\u0447\u043d\u044b\u0435; \u0435\u0441\u043b\u0438 \u043f\u043e\u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0438\u0445 \u0432 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435, \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u043a\u0443\u0447\u0443 \u043d\u0435\u0432\u043d\u044f\u0442\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430. SVG, \u043d\u0430\u043f\u0440\u043e\u0442\u0438\u0432, \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 XML, \u043a\u0430\u043a \u0438 HTML! \u0412\u043c\u0435\u0441\u0442\u043e \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u043e\u0432 R\/G\/B \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u044f, SVG \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0430\u0431\u043e\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439 \u043f\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0435, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u041c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u044b\u0440\u043e\u0439 SVG \u043f\u0440\u044f\u043c\u043e \u0432 HTML-\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442:<\/p>\n<pre><code>&lt;style&gt; body {   margin: 0;   padding: 0;   background: hsl(210deg 15% 6%);   color: white; } .wrapper {   display: flex;   flex-direction: column;   justify-content: center;   align-items: center;   gap: 16px;   height: 100vh; } svg {   display: block;   outline: 1px solid hsl(210deg 15% 30%); } &lt;\/style&gt;  &lt;div class=\"wrapper\"&gt;   &lt;p&gt;     Check out this SVG:   &lt;\/p&gt;    &lt;svg width=\"100\" height=\"100\"&gt;     &lt;circle       fill=\"hotpink\"       r=\"30\"       cx=\"50\"       cy=\"50\"     \/&gt;   &lt;\/svg&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<figure class=\"\">\n<div><figcaption>alt text<\/figcaption><\/div>\n<\/figure>\n<p>\u0412 HTML \u043d\u0430\u043c \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u043d\u0430\u0431\u043e\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0441 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u043c: \u0430\u0431\u0437\u0430\u0446\u044b (<code>&lt;p&gt;<\/code>), \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 (<code>&lt;h1&gt;<\/code>) \u0438 \u0441\u043f\u0438\u0441\u043a\u0438 (<code>&lt;ol&gt;<\/code>) \u2014 \u0442\u0435 \u0436\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0447\u0442\u043e \u0438 \u0432 Microsoft Word. SVG \u2014 \u044d\u0442\u043e \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u043d\u043e \u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0434\u043b\u044f \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <code>&lt;circle&gt;<\/code>, <code>&lt;polygon&gt;<\/code> \u0438 <code>&lt;path&gt;<\/code>.<\/p>\n<p>\u0421\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435, \u0447\u0442\u043e SVG-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u2013 \u043f\u043e\u043b\u043d\u043e\u043f\u0440\u0430\u0432\u043d\u044b\u0435 \u0447\u043b\u0435\u043d\u044b <a href=\"https:\/\/ru.wikipedia.org\/wiki\/Document_Object_Model\" rel=\"noopener noreferrer nofollow\">DOM<\/a> (\u043e\u0442 \u0430\u043d\u0433\u043b. Document Object Model \u2013 \u043e\u0431\u044a\u0435\u043a\u0442\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430). \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS \u0438 JavaScript \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u0430 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f SVG-\u0443\u0437\u043b\u043e\u0432, \u043a\u0430\u043a \u0435\u0441\u043b\u0438 \u0431\u044b \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n<p>\u041c\u043d\u043e\u0433\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b SVG, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0446\u0432\u0435\u0442 \u043a\u0440\u0443\u0433\u0430 (<code>fill<\/code>) \u0438 \u0440\u0430\u0434\u0438\u0443\u0441 (<code>r<\/code>), \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 CSS-\u0441\u0432\u043e\u0439\u0441\u0442\u0432. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0438\u0445 \u0432 CSS \u0438 \u0434\u0430\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS-\u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438!<\/p>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 SVG \u0442\u0430\u043a\u0438\u043c \u043c\u043e\u0449\u043d\u044b\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c. \u042d\u0442\u043e \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f HTML, \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u043d\u0438\u044f CSS\/JS, \u0447\u0442\u043e\u0431\u044b \u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0445 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u044b\u043c\u0438.<\/p>\n<p>\u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043d\u0435\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c, \u043d\u043e \u044f \u0447\u0430\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u044e \u0441\u0432\u043e\u0438 SVG-\u0444\u0430\u0439\u043b\u044b \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043a\u043e\u0434\u0430, \u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0435 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0430, \u0442\u0430\u043a\u043e\u0435 \u043a\u0430\u043a Illustrator \u0438\u043b\u0438 Figma. \u0424\u043e\u0442\u043e\u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 SVG, \u043d\u043e, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u043e\u043d\u0438 \u0432\u0441\u0451 \u0441\u043c\u0435\u0448\u0438\u0432\u0430\u044e\u0442 \u0432 \u043e\u0434\u0438\u043d <code>&lt;path&gt;<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0447\u0442\u043e, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0441\u0432\u043e\u0434\u0438\u0442 \u043d\u0430 \u043d\u0435\u0442 \u0441\u0430\u043c\u043e\u0435 \u043a\u0440\u0443\u0442\u043e\u0435 \u0432 SVG. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0432\u044b\u0431\u043e\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c. \u0417\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u0435\u0435 \u0434\u0435\u043b\u0430\u0442\u044c SVG \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u041f\u041e. \u041d\u043e \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u043f\u043e\u043a\u0430\u0437\u0430\u043b \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u0432\u044b\u0448\u0435, \u044f \u0434\u0443\u043c\u0430\u044e, \u043f\u0440\u043e\u0449\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u0432\u0440\u0443\u0447\u043d\u0443\u044e.<\/p>\n<h2>\u0411\u0430\u0437\u043e\u0432\u044b\u0435 \u0444\u0438\u0433\u0443\u0440\u044b<\/h2>\n<p>\u041a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u0432\u044b\u0448\u0435, SVG \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043e\u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. \u0412\u043c\u0435\u0441\u0442\u043e <code>&lt;div&gt;<\/code> \u0438 <code>&lt;button&gt;<\/code> \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0444\u0438\u0433\u0443\u0440\u044b \u0442\u0438\u043f\u0430 <code>&lt;circle&gt;<\/code> \u0438 <code>&lt;polygon&gt;<\/code>. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0438\u0445.<\/p>\n<h3>\u041b\u0438\u043d\u0438\u0438<\/h3>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0441\u0430\u043c\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0444\u0438\u0433\u0443\u0440\u0430 <code>&lt;line&gt;<\/code>:<\/p>\n<pre><code>&lt;svg width=\"280\" height=\"280\"&gt;   &lt;line     x1=\"80\"     y1=\"80\"     x2=\"200\"     y2=\"200\"     stroke=\"oklch(0.9 0.3 164)\"     stroke-width=\"5\"   \/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<figure class=\"\">\n<div><figcaption>line SVG<\/figcaption><\/div>\n<\/figure>\n<p>\u042d\u0442\u043e \u0442\u0430\u043a\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0432\u0435\u0449\u044c \u0434\u043b\u044f SVG, \u043d\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u0434\u043b\u044f HTML. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0434\u0438\u0430\u0433\u043e\u043d\u0430\u043b\u044c\u043d\u0443\u044e \u043b\u0438\u043d\u0438\u044e \u0432 HTML \u2014 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0434\u043b\u0438\u043d\u043d\u044b\u0439 \u0442\u043e\u043d\u043a\u0438\u0439 \u0443\u0437\u0435\u043b DOM \u0438 \u043f\u043e\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u0435\u0433\u043e, \u0447\u0442\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043b\u043e\u0436\u043d\u0443\u044e \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443, \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u0430 \u043b\u0438\u043d\u0438\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u043b\u0430\u0441\u044c \u0438 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u043b\u0430\u0441\u044c \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445.<\/p>\n<p>\u0412 SVG \u043b\u0438\u043d\u0438\u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e. \u041c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 (<code>x1<\/code> \u0438 <code>y1<\/code>) \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 (<code>x2<\/code> \u0438 <code>y2<\/code>), \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u0440\u044f\u043c\u0443\u044e \u043b\u0438\u043d\u0438\u044e \u043c\u0435\u0436\u0434\u0443 \u044d\u0442\u0438\u043c\u0438 \u0434\u0432\u0443\u043c\u044f \u0442\u043e\u0447\u043a\u0430\u043c\u0438!<\/p>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e <code>&lt;line&gt;<\/code> \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u044b. \u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u043d\u0438\u044e, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0435\u0439 \u0446\u0432\u0435\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 <code>stroke<\/code>. \u042f \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e <code>stroke-width<\/code>, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043b\u0438\u043d\u0438\u044e \u0442\u043e\u043b\u0449\u0435. <code>stroke<\/code> \u0438 <code>stroke-width<\/code> \u2013 \u043f\u0440\u0438\u043c\u0435\u0440\u044b <strong>\u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432<\/strong>, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 x1\/y1\/x2\/y2, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u043f\u0440\u0435\u0437\u0435\u043d\u0442\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u0445 \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u0434\u0430\u043b\u0435\u0435 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435.<\/p>\n<h3>\u041f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438<\/h3>\n<p>\u041f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043f\u043e \u0432\u0435\u0440\u0445\u043d\u0435\u043c\u0443 \u043b\u0435\u0432\u043e\u043c\u0443 \u0443\u0433\u043b\u0443, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u043c\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>x<\/code> \u0438 <code>y<\/code>. \u042d\u0442\u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u043e\u0442\u0441\u0447\u0435\u0442\u0430, \u043e\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u044b\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f <code>width<\/code> \u0438 <code>height<\/code>:<\/p>\n<pre><code>&lt;svg width=\"300\" height=\"300\"&gt;   &lt;rect     x=\"60\"     y=\"100\"     width=\"180\"     height=\"100\"     fill=\"none\"     stroke=\"oklch(0.9 0.3 164)\"     stroke-width=\"5\"   \/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<figure class=\"\">\n<div><figcaption>\u041f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a SVG<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u044d\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 a <code>&lt;div&gt;<\/code> \u0441\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c <code>border<\/code>, \u043d\u043e \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u0442\u043b\u0438\u0447\u0438\u0439.<\/p>\n<p>\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043e\u0431\u0432\u043e\u0434\u043a\u0430 \u0440\u0438\u0441\u0443\u0435\u0442\u0441\u044f \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u043a\u043e\u043d\u0442\u0443\u0440\u0430, \u0430 \u043d\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u043b\u0438 \u0441\u043d\u0430\u0440\u0443\u0436\u0438. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0438 <code>stroke-width<\/code>:<\/p>\n<pre><code>&lt;svg width=\"300\" height=\"300\"&gt;   &lt;rect     x=\"80\"     y=\"100\"     width=\"140\"     height=\"100\"     stroke-width=\"50\"     stroke=\"green\"     fill=\"none\"   \/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<figure class=\"\">\n<div><figcaption>\u041e\u0431\u0432\u043e\u0434\u043a\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 SVG<\/figcaption><\/div>\n<\/figure>\n<p>\u042d\u0442\u043e \u0441\u043f\u0440\u0430\u0432\u0435\u0434\u043b\u0438\u0432\u043e \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0444\u0438\u0433\u0443\u0440, \u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f <code>&lt;rect&gt;<\/code>. \u0418, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u044d\u0442\u043e \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c: \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u0434\u043e\u043b\u0436\u043d\u0430 \u043b\u0438 \u043e\u0431\u0432\u043e\u0434\u043a\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0444\u0438\u0433\u0443\u0440\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0438\u043b\u0438 \u0441\u043d\u0430\u0440\u0443\u0436\u0438.<\/p>\n<p><strong>\u0415\u0449\u0435 \u043e\u0434\u0438\u043d \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/strong>: \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442, \u0435\u0441\u043b\u0438 \u043c\u044b \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u043c \u043b\u0438\u0431\u043e <code>width<\/code>, \u043b\u0438\u0431\u043e <code>height<\/code> \u0434\u043e 0. \u0412\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u043e\u0436\u0438\u0434\u0430\u0442\u044c, \u0447\u0442\u043e \u043e\u043d \u0441\u0442\u0430\u043d\u0435\u0442 \u043f\u0440\u044f\u043c\u043e\u0439 \u043b\u0438\u043d\u0438\u0435\u0439, \u043d\u043e \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0432\u0441\u044f \u0444\u0438\u0433\u0443\u0440\u0430 \u0438\u0441\u0447\u0435\u0437\u043d\u0435\u0442.<\/p>\n<p>\u0412 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 SVG \u0442\u0430\u043a\u0438\u0435 \u0444\u0438\u0433\u0443\u0440\u044b \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u00ab\u0432\u044b\u0440\u043e\u0436\u0434\u0435\u043d\u043d\u044b\u043c\u0438\u00bb (\u0447\u0442\u043e, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0433\u0440\u0443\u0431\u043e!). \u0415\u0441\u043b\u0438 \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u0430\u044f \u0444\u0438\u0433\u0443\u0440\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>&lt;rect&gt;<\/code> \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043e\u0434\u043d\u043e\u043c \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0438, \u043e\u043d\u0430 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u043e\u0439 \u0438 \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f. \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0431\u044b\u043b\u043e \u043d\u0435\u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u043c: \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0432\u0441\u0451 \u0435\u0449\u0451 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u0438 \u043e\u0434\u043d\u043e\u043c\u0435\u0440\u043d\u044b\u0435 \u0444\u0438\u0433\u0443\u0440\u044b, \u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u2014 \u043d\u0435\u0442. \u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u0432\u0441\u0435 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0442\u0435\u043f\u0435\u0440\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0442 \u044d\u0442\u043e\u0439 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438.<\/p>\n<p>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043a\u0440\u0443\u0433\u043b\u0438\u0442\u044c \u0443\u0433\u043b\u044b \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>rx<\/code> \u0438 <code>ry<\/code>, \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e <code>border-radius<\/code> \u0432 HTML:<\/p>\n<pre><code>&lt;svg width=\"340\" height=\"340\"&gt;   &lt;rect     x=\"80\"     y=\"100\"     width=\"500\"     height=\"500\"     rx=\"100\"     ry=\"50\"     stroke=\"green\"     stroke-width=\"5\"     fill=\"none\"   \/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<figure class=\"\">\n<div><figcaption>\u0421\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u0435 \u0443\u0433\u043b\u043e\u0432 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430<\/figcaption><\/div>\n<\/figure>\n<h3>\u041e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438<\/h3>\n<p>\u0420\u0430\u0437\u043c\u0435\u0440 \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0435\u0435 \u0440\u0430\u0434\u0438\u0443\u0441\u043e\u043c <code>r<\/code>. \u041c\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u0438, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044f \u0446\u0435\u043d\u0442\u0440 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>cx<\/code> \u0438 <code>cy<\/code>:<\/p>\n<pre><code>&lt;svg width=\"280\" height=\"280\"&gt;   &lt;circle     cx=\"140\"     cy=\"140\"     r=\"70\"     fill=\"none\"     stroke=\"oklch(0.9 0.3 164)\"     stroke-width=\"5\"   \/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<figure class=\"\">\n<div><figcaption>\u041e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u044c SVG<\/figcaption><\/div>\n<\/figure>\n<p>\u041a\u0430\u043a \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 <code>&lt;rect&gt;<\/code>, \u043e\u043a\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u0441\u0447\u0435\u0437\u043d\u0435\u0442, \u0435\u0441\u043b\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0440\u0430\u0434\u0438\u0443\u0441 0.<\/p>\n<h3>\u042d\u043b\u043b\u0438\u043f\u0441\u044b<\/h3>\n<p><code>&lt;ellipse&gt;<\/code> \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e \u0438 <code>&lt;circle&gt;<\/code>, \u043d\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0435\u0433\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0430\u0434\u0438\u0443\u0441\u043e\u0432. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0432\u0430\u043b\u044b:<\/p>\n<pre><code>&lt;svg width=\"300\" height=\"300\"&gt;   &lt;ellipse     cx=\"150\"     cy=\"150\"     rx=\"75\"     ry=\"50\"     fill=\"none\"     stroke=\"oklch(0.9 0.3 164)\"     stroke-width=\"5\"   \/&gt; &lt;\/svg&gt;  <\/code><\/pre>\n<figure class=\"\">\n<div><figcaption>\u042d\u043b\u043b\u0438\u043f\u0441 SVG<\/figcaption><\/div>\n<\/figure>\n<h3>\u041c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438<\/h3>\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 <code>&lt;polygon&gt;<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0444\u0438\u0433\u0443\u0440\u044b \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u044d\u0442\u043e\u0439:<\/p>\n<pre><code>&lt;svg width=\"300\" height=\"300\"&gt;   &lt;polygon     points=\"       60,100       100,180       140,140       180,180       220,100     \"   \/&gt; &lt;\/svg&gt; <\/code><\/pre>\n<figure class=\"\">\n<div><figcaption>\u041c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a SVG<\/figcaption><\/div>\n<\/figure>\n<p>\u0410\u0442\u0440\u0438\u0431\u0443\u0442 <code>points<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u043e\u0447\u0435\u043a X\/Y; \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0430\u0440\u0438\u0441\u0443\u0435\u0442 \u043b\u0438\u043d\u0438\u044e \u043c\u0435\u0436\u0434\u0443 \u043a\u0430\u0436\u0434\u043e\u0439 \u0442\u043e\u0447\u043a\u043e\u0439 \u0438 \u043e\u0442 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u043a \u043f\u0435\u0440\u0432\u043e\u0439.<\/p>\n<p>\u042d\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043c\u043d\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u043c, \u043a\u043e\u0433\u0434\u0430 \u044f \u0438\u0437\u0443\u0447\u0430\u043b SVG. \u0412 \u043c\u043e\u0451\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0442\u0435\u0440\u043c\u0438\u043d \u00ab\u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u00bb \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u0447\u0435\u043c\u0443-\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c\u0443: \u043a \u0444\u0438\u0433\u0443\u0440\u0430\u043c \u0441 \u0432\u0440\u0430\u0449\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0438\u043c\u043c\u0435\u0442\u0440\u0438\u0435\u0439, \u0442\u0430\u043a\u0438\u043c \u043a\u0430\u043a \u0442\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438, \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u044b, \u0448\u0435\u0441\u0442\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438 \u0438 \u0432\u043e\u0441\u044c\u043c\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438:<\/p>\n<figure class=\"\">\n<div><figcaption>\u0421\u0438\u043c\u043c\u0435\u0442\u0440\u0438\u0447\u043d\u044b\u0439 \u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a SVG<\/figcaption><\/div>\n<\/figure>\n<p>\u041e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u044d\u0442\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 (\u0440\u0430\u0432\u043d\u043e\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435) \u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438. \u041e\u043d\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e\u0434\u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u0431\u043e\u043b\u0435\u0435 \u0448\u0438\u0440\u043e\u043a\u043e\u0433\u043e \u043c\u0438\u0440\u0430 \u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432.<\/p>\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u043e\u0432 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0442\u0440\u0438\u0433\u043e\u043d\u043e\u043c\u0435\u0442\u0440\u0438\u044f. \u042d\u0442\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u0437\u0430 \u0440\u0430\u043c\u043a\u0438 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438, \u043d\u043e \u044f \u0440\u0430\u0437\u043c\u0435\u0449\u0443 \u0440\u0430\u0441\u0447\u0451\u0442\u044b, \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435:<\/p>\n<pre><code>&lt;style&gt;   html {   display: grid;   place-content: center;   height: 100vh;   background: hsl(210deg 15% 6%);   }   svg {     outline: 1px solid hsl(210deg 15% 30%);   } &lt;\/style&gt;  &lt;svg class=\"parent-svg\" width=\"280\" height=\"280\"&gt;   &lt;polygon     class=\"mister-polygon\"     stroke=\"goldenrod\"     stroke-width=\"5\"     fill=\"none\"   \/&gt; &lt;\/svg&gt;  &lt;script&gt; const svg = document.querySelector('.parent-svg'); const polygon = document.querySelector('.mister-polygon');  \/\/ \u0438\u0437\u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u044d\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f: const numOfSides = 8; const radius = 80;  function drawPolygon() {   const svgWidth = Number(svg.getAttribute('width'));   const svgHeight = Number(svg.getAttribute('height'));   const cx = svgWidth \/ 2;   const cy = svgHeight \/ 2;      const points = range(numOfSides).map((index) =&gt; {    \/\/ \u0421\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0447\u0435\u0442\u043d\u044b\u0435   \/\/ \u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u0448\u0435\u0441\u0442\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438\/\u0432\u043e\u0441\u044c\u043c\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438, \u0431\u044b\u043b\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u044b \u043f\u043b\u043e\u0441\u043a\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u043e\u0439 \u0432\u0432\u0435\u0440\u0445, \u0430 \u043d\u0435 \u043e\u0441\u0442\u0440\u043e\u0439.   \/\/ \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u00ab0\u00bb, \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u044d\u0442\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e.     const rotationOffset = numOfSides % 2 === 0       ? Math.PI \/ numOfSides       : 0;          const angle =       (index * 2 * Math.PI) \/ numOfSides -       Math.PI \/ 2 +       rotationOffset;          const x = cx + radius * Math.cos(angle);     const y = cy + radius * Math.sin(angle);     return `${x},${y}`;   });    polygon.setAttribute(     'points',     points.join(' ')   ); }  drawPolygon(); &lt;\/script&gt; <\/code><\/pre>\n<figure class=\"\">\n<div><figcaption>\u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0432\u043e\u0441\u044c\u043c\u0438\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 JavaScript<\/figcaption><\/div>\n<\/figure>\n<p>\u0412 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u043c \u0432\u044b\u0448\u0435 \u043a\u043e\u0434\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0437\u0430\u043f\u044f\u0442\u044b\u0435 \u0438 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u044b \u0441\u0442\u0440\u043e\u043a, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0442\u043e\u0447\u0435\u043a \u0447\u0438\u0442\u0430\u0435\u043c\u044b\u043c\u0438:<\/p>\n<pre><code>&lt;polygon   points=\"     60,100     100,180     140,140     180,180     220,100   \" \/&gt; <\/code><\/pre>\n<p>\u042d\u0442\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u044b \u0441\u0447\u0438\u0442\u0430\u044e\u0442\u0441\u044f \u00ab\u043b\u0438\u0448\u043d\u0438\u043c\u0438\u00bb \u0432 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 SVG. \u041e\u043d\u0438 \u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b, \u043d\u043e \u043d\u0435<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-468283","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/468283","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=468283"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/468283\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=468283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=468283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=468283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}