{"id":1580,"date":"2021-11-26T00:55:55","date_gmt":"2021-11-25T21:55:55","guid":{"rendered":"https:\/\/1.cbm.ua\/?p=1580"},"modified":"2024-07-21T12:34:33","modified_gmt":"2024-07-21T09:34:33","slug":"%d1%83%d1%87%d0%b5%d0%b1%d0%bd%d0%b8%d0%ba-html5-%d0%b3%d1%80%d0%b0%d1%84%d0%b8%d0%ba%d0%b8-svg","status":"publish","type":"post","link":"https:\/\/1.cbm.ua\/?p=1580","title":{"rendered":"\u2764\ufe0f ___ \u0423\u0447\u0435\u0431\u043d\u0438\u043a HTML5 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u2013 SVG"},"content":{"rendered":"\n<p><a href=\"https:\/\/msiter.ru\/tutorials\/svg\/intro\">URL \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"\u0433\u0440\u0430\u0444\u0438\u043a\u0430\"><a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web#%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0\">\u0413\u0440\u0430\u0444\u0438\u043a\u0430<\/a><\/h3>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Canvas_API\">Canvas<\/a><br><a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/HTML\/Element\/canvas\"><code>&lt;canvas&gt;<\/code><\/a>&nbsp;\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 API \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f 2D-\u0433\u0440\u0430\u0444\u0438\u043a\u0438, \u0441&nbsp;\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c&nbsp;JavaScript.<\/p>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG\">SVG<\/a><br>SVG (Scalable Vector Graphics &#8212; \u043c\u0430\u0441\u0448\u0442\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) &#8212;&nbsp; &nbsp;\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0430\u043c \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u0432\u0438\u0434\u0435&nbsp;\u043b\u0438\u043d\u0438\u0439, \u043a\u0440\u0438\u0432\u044b\u0445 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u0438\u0433\u0443\u0440. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0438\u0441\u0443\u043d\u043e\u043a \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430.<\/p>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/API\/WebGL_API\">WebGL<\/a><br>WebGL &#8212; \u044d\u0442\u043e JavaScript API,&nbsp; \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u0435&nbsp;\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c 3D \u0438\u043b\u0438 2D \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f&nbsp; HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442&nbsp;<a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/HTML\/Element\/canvas\"><code>&lt;canvas&gt;<\/code><\/a>. \u042d\u0442\u0430 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 OpenGL ES \u0432 Web-\u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u043c.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">\u0423\u0427\u0415\u0411\u041d\u0418\u041a SVG<\/h2>\n\n\n\n<h5 class=\"wp-block-heading\">SVG \u0432 HTML. \u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG\/Tutorial\/SVG_In_HTML_Introduction#overview\">\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/a><\/h5>\n\n\n\n<h3 class=\"wp-block-heading\">SVG <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG#documentation\">\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/a><\/h3>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG\">https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG<\/a><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>\u0412\u0441\u0435 \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 (\u0441\u043f\u0438\u0441\u043e\u043a \u0413\u043b\u0430\u0432)<\/p>\n<\/div>\n<\/div>\n\n\n\n<pre class=\"jp_chapter_list\"><a href=\"#\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435-\u0432-SVG\" data-type=\"internal\" data-id=\"#\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435-\u0432-SVG\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 SVG<\/a>\n<a href=\"#SVG-\u0432-HTML\" data-type=\"internal\" data-id=\"#SVG-\u0432-HTML\">SVG \u0432 HTML<\/a>\n<a href=\"#SVG-\u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\" data-type=\"internal\" data-id=\"#SVG-\u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\">SVG \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a<\/a>\n<a href=\"#SVG-\u043a\u0440\u0443\u0433\" data-type=\"internal\" data-id=\"#SVG-\u043a\u0440\u0443\u0433\">SVG \u043a\u0440\u0443\u0433<\/a>\n<a href=\"#SVG-\u044d\u043b\u043b\u0438\u043f\u0441\" data-type=\"internal\" data-id=\"#SVG-\u044d\u043b\u043b\u0438\u043f\u0441\">SVG \u044d\u043b\u043b\u0438\u043f\u0441<\/a>\n<a href=\"#SVG-\u043f\u0440\u044f\u043c\u0430\u044f-\u043b\u0438\u043d\u0438\u044f\" data-type=\"internal\" data-id=\"#SVG-\u043f\u0440\u044f\u043c\u0430\u044f-\u043b\u0438\u043d\u0438\u044f\">SVG \u043f\u0440\u044f\u043c\u0430\u044f \u043b\u0438\u043d\u0438\u044f<\/a>\n<a href=\"#SVG-\u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\" data-type=\"internal\" data-id=\"#SVG-\u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\">SVG \u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a<\/a>\n<a href=\"#SVG-\u043b\u043e\u043c\u0430\u043d\u0430\u044f-\u043b\u0438\u043d\u0438\u044f\" data-type=\"internal\" data-id=\"#SVG-\u043b\u043e\u043c\u0430\u043d\u0430\u044f-\u043b\u0438\u043d\u0438\u044f\">SVG \u043b\u043e\u043c\u0430\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f<\/a>\n<a href=\"#SVG-\u043a\u043e\u043d\u0442\u0443\u0440\" data-type=\"internal\" data-id=\"#SVG-\u043a\u043e\u043d\u0442\u0443\u0440\">SVG \u043a\u043e\u043d\u0442\u0443\u0440<\/a>\n<a href=\"#SVG-\u0442\u0435\u043a\u0441\u0442\" data-type=\"internal\" data-id=\"#SVG-\u0442\u0435\u043a\u0441\u0442\">SVG \u0442\u0435\u043a\u0441\u0442<\/a>\n<a href=\"#SVG-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e-stroke\" data-type=\"internal\" data-id=\"#SVG-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e-stroke\">SVG \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e stroke\n<\/a><a href=\"#SVG-\u0444\u0438\u043b\u044c\u0442\u0440\u044b\" data-type=\"internal\" data-id=\"#SVG-\u0444\u0438\u043b\u044c\u0442\u0440\u044b\">SVG \u0444\u0438\u043b\u044c\u0442\u0440\u044b<\/a>\n<a href=\"#SVG-\u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b\" data-type=\"internal\" data-id=\"#SVG-\u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b\">SVG \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b<\/a>\n<a href=\"#SVG-\u0438-\u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438\" data-type=\"internal\" data-id=\"#SVG-\u0438-\u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438\">SVG \u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438<\/a>\n<a href=\"#\u0427\u0442\u043e-\u0434\u0435\u043b\u0430\u0435\u0442-\u0430\u0442\u0440\u0438\u0431\u0443\u0442-SVG-xmlns?\" data-type=\"internal\" data-id=\"\u0427\u0442\u043e-\u0434\u0435\u043b\u0430\u0435\u0442-\u0430\u0442\u0440\u0438\u0431\u0443\u0442-SVG-xmlns?\">\u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 SVG xmlns?<\/a>\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p id=\"\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435-\u0432-SVG\" class=\"jp_heading\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 SVG<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 SVG<\/h1>\n\n\n\n<h3 class=\"wp-block-heading\">\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 SVG?<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>SVG \u0440\u0430\u0441\u0448\u0438\u0444\u0440\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a&nbsp;<strong><em>\u043c\u0430\u0441\u0448\u0442\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<\/em><\/strong>&nbsp;(\u0430\u043d\u0433.&nbsp;<strong><em>Scalable Vector Graphics<\/em><\/strong>)<\/li><li>SVG \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u0443\u044e \u0433\u0440\u0430\u0444\u0438\u043a\u0443 \u0434\u043b\u044f \u0441\u0435\u0442\u0438<\/li><li>SVG \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 XML<\/li><li>SVG \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u041d\u0415 \u0442\u0435\u0440\u044f\u0435\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438\u043b\u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0438<\/li><li>\u041a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0432 SVG \u0444\u0430\u0439\u043b\u0430\u0445 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d<\/li><li>SVG \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0435\u0439 \u043a\u043e\u043d\u0441\u043e\u0440\u0446\u0438\u0443\u043c\u0430 W3C<\/li><li>SVG \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430\u043c\u0438 \u043a\u043e\u043d\u0441\u043e\u0440\u0446\u0438\u0443\u043c\u0430 W3C, \u0442\u0430\u043a\u0438\u043c\u0438 \u043a\u0430\u043a DOM \u0438 XSL<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 SVG<\/h3>\n\n\n\n<p>SVG \u0438\u043c\u0435\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u043d\u0430\u0434 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u043c\u0438 (\u043a\u0430\u043a JPEG \u0438 GIF):<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>SVG \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043b\u044e\u0431\u043e\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435<\/li><li>SVG \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0438\u043d\u0434\u0435\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0441\u0436\u0438\u043c\u0430\u0442\u044c\u0441\u044f, \u043f\u043e \u043d\u0438\u043c \u043c\u043e\u0436\u043d\u043e \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u0438\u0441\u043a<\/li><li>SVG \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043b\u0435\u0433\u043a\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u044e\u0442\u0441\u044f<\/li><li>SVG \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0441\u043f\u0435\u0447\u0430\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0432\u044b\u0441\u043e\u043a\u043e\u043c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438 \u043b\u044e\u0431\u043e\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0438<\/li><li>\u041b\u044e\u0431\u0443\u044e \u0447\u0430\u0441\u0442\u044c SVG \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438<\/li><li>SVG \u2014 \u044d\u0442\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442<\/li><li>SVG \u0444\u0430\u0439\u043b\u044b \u2014 \u044d\u0442\u043e \u0447\u0438\u0441\u0442\u044b\u0439 XML \u043a\u043e\u0434<\/li><\/ul>\n\n\n\n<p>\u0413\u043b\u0430\u0432\u043d\u044b\u043c \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043e\u043c SVG \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f Flash. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0441\u0430\u043c\u044b\u043c \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u043c SVG \u043d\u0430\u0434 Flash \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0435\u0433\u043e \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430\u043c\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, XSL \u0438 DOM). Flash \u0436\u0435 \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u043f\u0440\u0438\u0435\u0442\u0430\u0440\u043d\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0438 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u043c.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 SVG \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/h3>\n\n\n\n<p>SVG \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435, \u043e\u0434\u043d\u0430\u043a\u043e \u0447\u0430\u0441\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0434\u043b\u044f \u044d\u0442\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b, \u0432\u0440\u043e\u0434\u0435&nbsp;<a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/inkscape.org\/ru\/\">Inkscape<\/a>.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 SVG<\/h1>\n\n\n\n<h3 class=\"wp-block-heading\">\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 SVG?<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>SVG \u0440\u0430\u0441\u0448\u0438\u0444\u0440\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a&nbsp;<strong><em>\u043c\u0430\u0441\u0448\u0442\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<\/em><\/strong>&nbsp;(\u0430\u043d\u0433.&nbsp;<strong><em>Scalable Vector Graphics<\/em><\/strong>)<\/li><li>SVG \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u0443\u044e \u0433\u0440\u0430\u0444\u0438\u043a\u0443 \u0434\u043b\u044f \u0441\u0435\u0442\u0438<\/li><li>SVG \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 XML<\/li><li>SVG \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u041d\u0415 \u0442\u0435\u0440\u044f\u0435\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438\u043b\u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0438<\/li><li>\u041a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0432 SVG \u0444\u0430\u0439\u043b\u0430\u0445 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d<\/li><li>SVG \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0435\u0439 \u043a\u043e\u043d\u0441\u043e\u0440\u0446\u0438\u0443\u043c\u0430 W3C<\/li><li>SVG \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430\u043c\u0438 \u043a\u043e\u043d\u0441\u043e\u0440\u0446\u0438\u0443\u043c\u0430 W3C, \u0442\u0430\u043a\u0438\u043c\u0438 \u043a\u0430\u043a DOM \u0438 XSL<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 SVG<\/h3>\n\n\n\n<p>SVG \u0438\u043c\u0435\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u043d\u0430\u0434 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u043c\u0438 (\u043a\u0430\u043a JPEG \u0438 GIF):<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>SVG \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043b\u044e\u0431\u043e\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435<\/li><li>SVG \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0438\u043d\u0434\u0435\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0441\u0436\u0438\u043c\u0430\u0442\u044c\u0441\u044f, \u043f\u043e \u043d\u0438\u043c \u043c\u043e\u0436\u043d\u043e \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0442\u044c \u043f\u043e\u0438\u0441\u043a<\/li><li>SVG \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043b\u0435\u0433\u043a\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u044e\u0442\u0441\u044f<\/li><li>SVG \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0440\u0430\u0441\u043f\u0435\u0447\u0430\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0432\u044b\u0441\u043e\u043a\u043e\u043c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438 \u043b\u044e\u0431\u043e\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0438<\/li><li>\u041b\u044e\u0431\u0443\u044e \u0447\u0430\u0441\u0442\u044c SVG \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438<\/li><li>SVG \u2014 \u044d\u0442\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442<\/li><li>SVG \u0444\u0430\u0439\u043b\u044b \u2014 \u044d\u0442\u043e \u0447\u0438\u0441\u0442\u044b\u0439 XML \u043a\u043e\u0434<\/li><\/ul>\n\n\n\n<p>\u0413\u043b\u0430\u0432\u043d\u044b\u043c \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043e\u043c SVG \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f Flash. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0441\u0430\u043c\u044b\u043c \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u043c SVG \u043d\u0430\u0434 Flash \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0435\u0433\u043e \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430\u043c\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, XSL \u0438 DOM). Flash \u0436\u0435 \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u043f\u0440\u0438\u0435\u0442\u0430\u0440\u043d\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0438 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u043c.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 SVG \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/h3>\n\n\n\n<p>SVG \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435, \u043e\u0434\u043d\u0430\u043a\u043e \u0447\u0430\u0441\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u0434\u043b\u044f \u044d\u0442\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b, \u0432\u0440\u043e\u0434\u0435&nbsp;<a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/inkscape.org\/ru\/\">Inkscape<\/a>.<\/p>\n\n\n\n<p class=\"jp_heading\" id=\"SVG-\u0432-HTML\">SVG \u0432 HTML<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">SVG \u0432 HTML<\/h1>\n\n\n\n<p>\u0412 HTML5 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 SVG \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 HTML \u043a\u043e\u0434 \u0432\u0435\u0431-\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430.<\/p>\n\n\n\n<p><strong>\u0412\u043a\u043b\u044e\u0447\u0430\u0439\u0442\u0435 SVG \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 HTML \u043a\u043e\u0434 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/strong><\/p>\n\n\n\n<p>\u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 SVG \u0433\u0440\u0430\u0444\u0438\u043a\u0438:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"94\" height=\"88\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-54.png\" alt=\"\" class=\"wp-image-1611\"\/><\/figure>\n\n\n\n<p>\u0412\u043e\u0442 HTML \u043a\u043e\u0434, \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u044e\u0449\u0438\u0439 \u0435\u0435:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html>\n&lt;body>\n\n&lt;h1>\u041c\u043e\u044f \u043f\u0435\u0440\u0432\u0430\u044f SVG \u0433\u0440\u0430\u0444\u0438\u043a\u0430&lt;\/h1>\n\n&lt;svg width=\"100\" height=\"100\">\n  &lt;circle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"green\" stroke-width=\"4\" fill=\"yellow\" \/>\n&lt;\/svg>\n\n&lt;\/body>\n&lt;\/html>\n\n<\/pre>\n\n\n\n<p>\u041e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u044f SVG \u043a\u043e\u0434\u0430:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>SVG \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;svg&gt;<\/li><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b&nbsp;<strong><em>width<\/em><\/strong>&nbsp;\u0438&nbsp;<strong><em>height<\/em><\/strong>&nbsp;\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;svg&gt; \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 SVG \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/li><li>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;circle&gt; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u0440\u0443\u0433\u0430<\/li><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b&nbsp;<strong><em>cx<\/em><\/strong>&nbsp;\u0438&nbsp;<strong><em>cy<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b X \u0438 Y \u0446\u0435\u043d\u0442\u0440\u0430 \u043a\u0440\u0443\u0433\u0430. \u0415\u0441\u043b\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b&nbsp;<strong><em>cx<\/em><\/strong>&nbsp;\u0438&nbsp;<strong><em>cy<\/em><\/strong>&nbsp;\u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f, \u0442\u043e \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0446\u0435\u043d\u0442\u0440\u0430 \u043a\u0440\u0443\u0433\u0430 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (0, 0)<\/li><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>r<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0440\u0430\u0434\u0438\u0443\u0441 \u043a\u0440\u0443\u0433\u0430<\/li><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b&nbsp;<strong><em>stroke<\/em><\/strong>&nbsp;\u0438&nbsp;<strong><em>stroke-width<\/em><\/strong>&nbsp;\u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0437\u0430 \u0442\u043e, \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0444\u0438\u0433\u0443\u0440\u0430. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043a\u0440\u0443\u0433 \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u043b\u0438\u043d\u0438\u0435\u0439 \u0437\u0435\u043b\u0435\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0442\u043e\u043b\u0449\u0438\u043d\u043e\u0439 4px<\/li><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>fill<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043a\u0440\u0443\u0433\u0430. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0437\u0430\u0434\u0430\u043d \u0436\u0435\u043b\u0442\u044b\u0439 \u0446\u0432\u0435\u0442<\/li><li>\u0417\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0442\u0435\u0433 &lt;\/svg&gt; \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 SVG \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/li><\/ul>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435<\/strong>: \u0422\u0430\u043a \u043a\u0430\u043a SVG \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0446\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0444\u043e\u0440\u043c\u0430\u0442 XML, \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0437\u0430\u043a\u0440\u044b\u0442\u044b \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0435\u0439 XML!<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p class=\"jp_heading\" id=\"SVG-\u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\">SVG \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">SVG \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a<\/h1>\n\n\n\n<p>\u0412 SVG \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0435\u0434\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0444\u0438\u0433\u0443\u0440\u044b:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u041f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a &lt;rect&gt;<\/li><li>\u041a\u0440\u0443\u0433 &lt;circle&gt;<\/li><li>\u042d\u043b\u043b\u0438\u043f\u0441 &lt;ellipse&gt;<\/li><li>\u041f\u0440\u044f\u043c\u0430\u044f \u043b\u0438\u043d\u0438\u044f &lt;line&gt;<\/li><li>\u041b\u043e\u043c\u0430\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f &lt;polyline&gt;<\/li><li>\u041c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a &lt;polygon&gt;<\/li><li>\u041a\u043e\u043d\u0442\u0443\u0440 &lt;path&gt;<\/li><\/ul>\n\n\n\n<p>\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0433\u043b\u0430\u0432\u0430\u0445 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u0438 \u043d\u0430\u0447\u043d\u0435\u043c \u043c\u044b \u0441 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">SVG \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a &#8212; &lt;rect&gt;<\/h3>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u21161<\/strong><\/p>\n\n\n\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0435\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u0446\u0438\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;rect&gt;:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"307\" height=\"108\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-55.png\" alt=\"\" class=\"wp-image-1613\" srcset=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-55.png 307w, https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-55-300x106.png 300w\" sizes=\"auto, (max-width: 307px) 100vw, 307px\" \/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg width=\"400\" height=\"110\">\n   &lt;rect width=\"300\" height=\"100\" style=\"fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)\" \/>\n&lt;\/svg>\n\n<\/pre>\n\n\n\n<p>\u041e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b&nbsp;<strong><em>width<\/em><\/strong>&nbsp;\u0438&nbsp;<strong><em>height<\/em><\/strong>&nbsp;\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;rect&gt; \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430<\/li><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>style<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430<\/li><li>CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e&nbsp;<strong><em>fill<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0446\u0432\u0435\u0442 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430<\/li><li>CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e&nbsp;<strong><em>stroke-width<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0442\u043e\u043b\u0449\u0438\u043d\u0443 \u0440\u0430\u043c\u043a\u0438 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430<\/li><li>CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e&nbsp;<strong><em>stroke<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0446\u0432\u0435\u0442 \u0440\u0430\u043c\u043a\u0438 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430<\/li><\/ul>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u21162<\/strong><\/p>\n\n\n\n<p>\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"160\" height=\"161\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-56.png\" alt=\"\" class=\"wp-image-1614\" srcset=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-56.png 160w, https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-56-150x150.png 150w\" sizes=\"auto, (max-width: 160px) 100vw, 160px\" \/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg width=\"400\" height=\"180\">\n   &lt;rect x=\"50\" y=\"20\" width=\"150\" height=\"150\"\n   style=\"fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9\" \/>\n&lt;\/svg>\n\n<\/pre>\n\n\n\n<p>\u041e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>x<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0441\u043b\u0435\u0432\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, x=&#187;50&#8243; \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0432 50px \u043e\u0442 \u043b\u0435\u0432\u043e\u0433\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u0430)<\/li><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>y<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430 \u0441\u0432\u0435\u0440\u0445\u0443 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, y=&#187;20&#8243; \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0432 20px \u043e\u0442 \u0432\u0435\u0440\u0445\u043d\u0435\u0433\u043e \u043e\u0442\u0441\u0442\u0443\u043f\u0430)<\/li><li>CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e&nbsp;<strong><em>fill-opacity<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0446\u0432\u0435\u0442\u0430 \u0437\u0430\u043b\u0438\u0432\u043a\u0438 (\u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d: \u043e\u0442 0 \u0434\u043e 1)<\/li><li>CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e&nbsp;<strong><em>stroke-opacity<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0446\u0432\u0435\u0442\u0430 \u043f\u0440\u043e\u0440\u0438\u0441\u043e\u0432\u043a\u0438 (\u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d: \u043e\u0442 0 \u0434\u043e 1)<\/li><\/ul>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u21163<\/strong><\/p>\n\n\n\n<p>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0432\u0441\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"160\" height=\"159\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-57.png\" alt=\"\" class=\"wp-image-1615\" srcset=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-57.png 160w, https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-57-150x150.png 150w\" sizes=\"auto, (max-width: 160px) 100vw, 160px\" \/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg width=\"400\" height=\"180\">\n   &lt;rect x=\"50\" y=\"20\" width=\"150\" height=\"150\"\n   style=\"fill:blue;stroke:pink;stroke-width:5;opacity:0.5\" \/>\n&lt;\/svg>\n\n<\/pre>\n\n\n\n<p>\u041e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>CSS \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e&nbsp;<strong><em>opacity<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (\u0434\u043e\u043f\u0443\u0441\u0442\u0438\u043c\u044b\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d: \u043e\u0442 0 \u0434\u043e 1)<\/li><\/ul>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u21164<\/strong><\/p>\n\n\n\n<p>\u0412 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0441 \u0437\u0430\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u0443\u0433\u043b\u0430\u043c\u0438:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"160\" height=\"159\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-58.png\" alt=\"\" class=\"wp-image-1616\" srcset=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-58.png 160w, https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-58-150x150.png 150w\" sizes=\"auto, (max-width: 160px) 100vw, 160px\" \/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg width=\"400\" height=\"180\">\n   &lt;rect x=\"50\" y=\"20\" rx=\"20\" ry=\"20\" width=\"150\" height=\"150\"\n   style=\"fill:red;stroke:black;stroke-width:5;opacity:0.5\" \/>\n&lt;\/svg>\n\n<\/pre>\n\n\n\n<p>\u041e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b&nbsp;<strong><em>rx<\/em><\/strong>&nbsp;\u0438&nbsp;<strong><em>ry<\/em><\/strong>&nbsp;\u0437\u0430\u043a\u0440\u0443\u0433\u043b\u044f\u044e\u0442 \u0443\u0433\u043b\u044b \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p class=\"jp_heading\" id=\"SVG-\u043a\u0440\u0443\u0433\">SVG \u043a\u0440\u0443\u0433<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">SVG \u043a\u0440\u0443\u0433<\/h1>\n\n\n\n<p>\u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043a\u0440\u0443\u0433, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;circle&gt;:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"85\" height=\"83\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-59.png\" alt=\"\" class=\"wp-image-1619\"\/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"100\" width=\"100\">\n   &lt;circle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"black\" stroke-width=\"3\" fill=\"red\" \/>\n&lt;\/svg>\n\n<\/pre>\n\n\n\n<p>\u041e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b&nbsp;<strong><em>cx<\/em><\/strong>&nbsp;\u0438&nbsp;<strong><em>cy<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b X \u0438 Y \u0446\u0435\u043d\u0442\u0440\u0430 \u043a\u0440\u0443\u0433\u0430. \u0415\u0441\u043b\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b&nbsp;<strong><em>cx<\/em><\/strong>&nbsp;\u0438&nbsp;<strong><em>cy<\/em><\/strong>&nbsp;\u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f, \u0442\u043e \u0446\u0435\u043d\u0442\u0440 \u043a\u0440\u0443\u0433\u0430 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b (0,0)<\/li><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>r<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0440\u0430\u0434\u0438\u0443\u0441 \u043a\u0440\u0443\u0433\u0430<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p class=\"jp_heading\" id=\"SVG-\u044d\u043b\u043b\u0438\u043f\u0441\">SVG \u044d\u043b\u043b\u0438\u043f\u0441<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">SVG \u044d\u043b\u043b\u0438\u043f\u0441<\/h1>\n\n\n\n<p>\u0427\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u044d\u043b\u043b\u0438\u043f\u0441, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;ellipse&gt;.<\/p>\n\n\n\n<p>\u042d\u043b\u043b\u0438\u043f\u0441 \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u043b\u0438\u0437\u043a\u043e\u0435 \u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043a \u043a\u0440\u0443\u0433\u0443. \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0443 \u044d\u043b\u043b\u0438\u043f\u0441\u0430 \u0440\u0430\u0434\u0438\u0443\u0441\u044b \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0438 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0441\u0438 \u0440\u0430\u0437\u043d\u044b\u0435, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u0443 \u043a\u0440\u0443\u0433\u0430 \u043e\u043d\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435.<\/p>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u21161<\/strong><\/p>\n\n\n\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u044d\u043b\u043b\u0438\u043f\u0441:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"205\" height=\"105\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-60.png\" alt=\"\" class=\"wp-image-1620\"\/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"140\" width=\"500\">\n   &lt;ellipse cx=\"200\" cy=\"80\" rx=\"100\" ry=\"50\"\n  style=\"fill:yellow;stroke:purple;stroke-width:2\" \/>\n&lt;\/svg> \n\n<\/pre>\n\n\n\n<p>\u041e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>cx<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0443 X \u0446\u0435\u043d\u0442\u0440\u0430 \u044d\u043b\u043b\u0438\u043f\u0441\u0430<\/li><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>cy<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0443 Y \u0446\u0435\u043d\u0442\u0440\u0430 \u044d\u043b\u043b\u0438\u043f\u0441\u0430<\/li><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>rx<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0434\u0438\u0443\u0441<\/li><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>ry<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0434\u0438\u0443\u0441<\/li><\/ul>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u21162<\/strong><\/p>\n\n\n\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0442\u0440\u0438 \u044d\u043b\u043b\u0438\u043f\u0441\u0430, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0434\u0440\u0443\u0433 \u043d\u0430\u0434 \u0434\u0440\u0443\u0433\u043e\u043c:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"445\" height=\"106\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-61.png\" alt=\"\" class=\"wp-image-1621\" srcset=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-61.png 445w, https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-61-300x71.png 300w\" sizes=\"auto, (max-width: 445px) 100vw, 445px\" \/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"150\" width=\"500\">\n   &lt;ellipse cx=\"240\" cy=\"100\" rx=\"220\" ry=\"30\" style=\"fill:purple\" \/>\n   &lt;ellipse cx=\"220\" cy=\"70\" rx=\"190\" ry=\"20\" style=\"fill:lime\" \/>\n   &lt;ellipse cx=\"210\" cy=\"45\" rx=\"170\" ry=\"15\" style=\"fill:yellow\" \/>\n&lt;\/svg> \n\n<\/pre>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u21163<\/strong><\/p>\n\n\n\n<p>\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441\u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u0443\u0435\u043c \u0434\u0432\u0430 \u044d\u043b\u043b\u0438\u043f\u0441\u0430 (\u0436\u0435\u043b\u0442\u044b\u0439 \u0438 \u0431\u0435\u043b\u044b\u0439):<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"443\" height=\"66\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-62.png\" alt=\"\" class=\"wp-image-1622\" srcset=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-62.png 443w, https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-62-300x45.png 300w\" sizes=\"auto, (max-width: 443px) 100vw, 443px\" \/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"100\" width=\"500\">\n   &lt;ellipse cx=\"240\" cy=\"50\" rx=\"220\" ry=\"30\" style=\"fill:yellow\" \/>\n   &lt;ellipse cx=\"220\" cy=\"50\" rx=\"190\" ry=\"20\" style=\"fill:white\" \/>\n&lt;\/svg>\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p class=\"jp_heading\" id=\"SVG-\u043f\u0440\u044f\u043c\u0430\u044f-\u043b\u0438\u043d\u0438\u044f\">SVG \u043f\u0440\u044f\u043c\u0430\u044f \u043b\u0438\u043d\u0438\u044f<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">SVG \u043f\u0440\u044f\u043c\u0430\u044f \u043b\u0438\u043d\u0438\u044f<\/h1>\n\n\n\n<p>\u0427\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u044f\u043c\u0443\u044e \u043b\u0438\u043d\u0438\u044e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;line&gt;:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"209\" height=\"211\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-63.png\" alt=\"\" class=\"wp-image-1625\" srcset=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-63.png 209w, https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-63-150x150.png 150w\" sizes=\"auto, (max-width: 209px) 100vw, 209px\" \/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"210\" width=\"500\">\n   &lt;line x1=\"0\" y1=\"0\" x2=\"200\" y2=\"200\" style=\"stroke:rgb(255,0,0);stroke-width:2\" \/>\n&lt;\/svg> \n\n<\/pre>\n\n\n\n<p>\u041e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>x1<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0443 X \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u043b\u0438\u043d\u0438\u0438<\/li><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>y1<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0443 Y \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u043b\u0438\u043d\u0438\u0438<\/li><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>x2<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0443 X \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u043b\u0438\u043d\u0438\u0438<\/li><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>y2<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0443 Y \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u043b\u0438\u043d\u0438\u0438<\/li><\/ul>\n\n\n\n<hr>\n\n\n\n<p class=\"jp_heading\" id=\"SVG-\u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\">SVG \u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">SVG \u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a<\/h1>\n\n\n\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;polygon&gt; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0444\u0438\u0433\u0443\u0440\u044b, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u0439 \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0442\u0440\u0438 \u0441\u0442\u043e\u0440\u043e\u043d\u044b.<\/p>\n\n\n\n<p>\u041c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u0438\u0437 \u043f\u0440\u044f\u043c\u044b\u0445 \u043b\u0438\u043d\u0438\u0439, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043a\u043e\u043d\u0442\u0443\u0440 &#171;\u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f&#187; (\u0432\u0441\u0435 \u043b\u0438\u043d\u0438\u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u044b).<\/p>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u21161<\/strong><\/p>\n\n\n\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0441 \u0442\u0440\u0435\u043c\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u0430\u043c\u0438:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"93\" height=\"203\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-64.png\" alt=\"\" class=\"wp-image-1626\"\/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"210\" width=\"500\">\n   &lt;polygon points=\"200,10 250,190 160,210\" style=\"fill:lime;stroke:purple;stroke-width:1\" \/>\n&lt;\/svg> \n\n<\/pre>\n\n\n\n<p>\u041e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>points<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b X \u0438 Y \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0443\u0433\u043b\u0430 \u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a\u0430<\/li><\/ul>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u2116 2<\/strong><\/p>\n\n\n\n<p>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043c\u043d\u043e\u0433\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u0441 \u0447\u0435\u0442\u044b\u0440\u044c\u043c\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u0430\u043c\u0438:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"178\" height=\"244\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-65.png\" alt=\"\" class=\"wp-image-1627\"\/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"250\" width=\"500\">\n   &lt;polygon points=\"220,10 300,210 170,250 123,234\" style=\"fill:lime;stroke:purple;stroke-width:1\" \/>\n&lt;\/svg> \n\n<\/pre>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u21163<\/strong><\/p>\n\n\n\n<p>\u041d\u0430\u0440\u0438\u0441\u0443\u0435\u043c \u0437\u0432\u0435\u0437\u0434\u0443 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;polygon&gt;:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"194\" height=\"204\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-66.png\" alt=\"\" class=\"wp-image-1628\"\/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"210\" width=\"500\">\n   &lt;polygon points=\"100,10 40,198 190,78 10,78 160,198\"\n   style=\"fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;\" \/>\n&lt;\/svg> \n\n<\/pre>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u21164<\/strong><\/p>\n\n\n\n<p>\u0418\u0437\u043c\u0435\u043d\u0438\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e fill-rule \u043d\u0430 &#171;evenodd&#187;:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"194\" height=\"204\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-67.png\" alt=\"\" class=\"wp-image-1629\"\/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"210\" width=\"500\">\n   &lt;polygon points=\"100,10 40,198 190,78 10,78 160,198\"\n   style=\"fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;\" \/>\n&lt;\/svg>\n\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p class=\"jp_heading\" id=\"SVG-\u043b\u043e\u043c\u0430\u043d\u0430\u044f-\u043b\u0438\u043d\u0438\u044f\">SVG \u043b\u043e\u043c\u0430\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">SVG \u043b\u043e\u043c\u0430\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f<\/h1>\n\n\n\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;polyline&gt; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f, \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u043e\u0439, \u043b\u043e\u043c\u0430\u043d\u043e\u0439 \u043b\u0438\u043d\u0438\u0438.<\/p>\n\n\n\n<p>\u041b\u043e\u043c\u0430\u043d\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0438\u0437 \u043f\u0440\u044f\u043c\u044b\u0445 \u043b\u0438\u043d\u0438\u0439, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043a\u043e\u043d\u0442\u0443\u0440 &#171;\u043d\u0435 \u0437\u0430\u043c\u044b\u043a\u0430\u0435\u0442\u0441\u044f&#187;.<\/p>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u21161<\/strong><\/p>\n\n\n\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;polyline&gt; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u0443\u044e \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0444\u0438\u0433\u0443\u0440\u0443, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0443\u044e \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437 \u043f\u0440\u044f\u043c\u044b\u0445 \u043b\u0438\u043d\u0438\u0439:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"187\" height=\"168\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-68.png\" alt=\"\" class=\"wp-image-1630\"\/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"200\" width=\"500\">\n   &lt;polyline points=\"20,20 40,25 60,40 80,120 120,140 200,180\"\n   style=\"fill:none;stroke:black;stroke-width:3\" \/>\n&lt;\/svg> \n\n<\/pre>\n\n\n\n<p>\u041e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>points<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b X \u0438 Y \u043a\u0430\u0436\u0434\u043e\u0433\u043e &#171;\u043f\u0435\u0440\u0435\u043b\u043e\u043c\u0430&#187; \u043b\u0438\u043d\u0438\u0438<\/li><\/ul>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u21162<\/strong><\/p>\n\n\n\n<p>\u0414\u0440\u0443\u0433\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0444\u0438\u0433\u0443\u0440\u044b, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0435\u0439 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437 \u043f\u0440\u044f\u043c\u044b\u0445 \u043b\u0438\u043d\u0438\u0439:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"127\" height=\"129\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-69.png\" alt=\"\" class=\"wp-image-1631\"\/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"180\" width=\"500\">\n   &lt;polyline points=\"0,40 40,40 40,80 80,80 80,120 120,120 120,160\"\n   style=\"fill:white;stroke:red;stroke-width:4\" \/>\n&lt;\/svg>\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p class=\"jp_heading\" id=\"SVG-\u043a\u043e\u043d\u0442\u0443\u0440\">SVG \u043a\u043e\u043d\u0442\u0443\u0440<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">SVG \u043a\u043e\u043d\u0442\u0443\u0440<\/h1>\n\n\n\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0443\u0440\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;path&gt;.<\/p>\n\n\n\n<p>\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u043d\u0442\u0443\u0440\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>M = \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c<\/li><li>L = \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u043d\u0438\u044e<\/li><li>H = \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u043b\u0438\u043d\u0438\u044e<\/li><li>V = \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u043b\u0438\u043d\u0438\u044e<\/li><li>C = \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043a\u0443\u0431\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043a\u0440\u0438\u0432\u0443\u044e \u0411\u0435\u0437\u044c\u0435 \u0441 \u0434\u0432\u0443\u043c\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u043c\u0438 \u0442\u043e\u0447\u043a\u0430\u043c\u0438<\/li><li>S = \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u0433\u043b\u0430\u0436\u0435\u043d\u043d\u0443\u044e \u043a\u0443\u0431\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043a\u0440\u0438\u0432\u0443\u044e \u0411\u0435\u0437\u044c\u0435 \u0441 \u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u043e\u0439<\/li><li>Q = \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u0447\u043d\u0443\u044e \u043a\u0440\u0438\u0432\u0443\u044e \u0411\u0435\u0437\u044c\u0435 \u0441 \u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u043e\u0439<\/li><li>T = \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u0433\u043b\u0430\u0436\u0435\u043d\u043d\u0443\u044e \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u0447\u043d\u0443\u044e \u043a\u0440\u0438\u0432\u0443\u044e \u0411\u0435\u0437\u044c\u0435. \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b.<\/li><li>A = \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u043b\u0438\u043f\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043a\u0440\u0438\u0432\u0443\u044e<\/li><li>Z = \u0437\u0430\u043a\u0440\u044b\u0442\u044c \u043a\u043e\u043d\u0442\u0443\u0440<\/li><\/ul>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435<\/strong>: \u0412\u0441\u0435 \u0432\u044b\u0448\u0435\u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0438\u043c\u0435\u044e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 \u043d\u0438\u0436\u043d\u0435\u043c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0435. \u0415\u0441\u043b\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u0431\u0443\u043a\u0432\u0430\u043c\u0438, \u0442\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u043c. \u0415\u0441\u043b\u0438 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u043c\u0438 \u0431\u0443\u043a\u0432\u0430\u043c\u0438, \u0442\u043e \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c.<\/p>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u21161<\/strong><\/p>\n\n\n\n<p>\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0443\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u0445 (150,0), \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043b\u0438\u043d\u0438\u044f \u0432 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b (75,200), \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043b\u0438\u043d\u0438\u044f \u0432 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b (225,200) \u0438, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u043a\u043e\u043d\u0442\u0443\u0440 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u0445 (150,0):<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"151\" height=\"202\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-70.png\" alt=\"\" class=\"wp-image-1632\"\/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"210\" width=\"400\">\n   &lt;path d=\"M150 0 L75 200 L225 200 Z\" \/>\n&lt;\/svg> \n\n<\/pre>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u21162<\/strong><\/p>\n\n\n\n<p>\u041a\u0440\u0438\u0432\u044b\u0435 \u0411\u0435\u0437\u044c\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u043c\u043e\u0434\u0435\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043b\u0430\u0432\u043d\u044b\u0445 \u043a\u0440\u0438\u0432\u044b\u0445 \u043b\u0438\u043d\u0438\u0439, \u043c\u0430\u0441\u0448\u0442\u0430\u0431 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0442\u044c. \u041e\u0431\u044b\u0447\u043d\u043e, \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0434\u0432\u0435 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0445 \u0442\u043e\u0447\u043d\u044b\u0445 \u0442\u043e\u0447\u043a\u0438 \u0438 \u043e\u0434\u043d\u0443 \u0438\u043b\u0438 \u0434\u0432\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u0445. \u041a\u0440\u0438\u0432\u0443\u044e \u0411\u0435\u0437\u044c\u0435 \u0441 \u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u043e\u0439 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0438\u0447\u043d\u043e\u0439 \u043a\u0440\u0438\u0432\u043e\u0439 \u0411\u0435\u0437\u044c\u0435, \u0430 \u0441 \u0434\u0432\u0443\u043c\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u044b\u043c\u0438 \u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u2014 \u043a\u0443\u0431\u0438\u0447\u0435\u0441\u043a\u043e\u0439.<\/p>\n\n\n\n<p>\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043a\u0443\u0431\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043a\u0440\u0438\u0432\u0430\u044f \u0411\u0435\u0437\u044c\u0435. \u0417\u0434\u0435\u0441\u044c A \u0438 C \u2014 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0438, B \u2014 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"382\" height=\"344\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-71.png\" alt=\"\" class=\"wp-image-1633\" srcset=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-71.png 382w, https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-71-300x270.png 300w\" sizes=\"auto, (max-width: 382px) 100vw, 382px\" \/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"400\" width=\"450\">\n   &lt;path id=\"lineAB\" d=\"M 100 350 l 150 -300\" stroke=\"red\"\n   stroke-width=\"3\" fill=\"none\" \/>\n   &lt;path id=\"lineBC\" d=\"M 250 50 l 150 300\" stroke=\"red\"\n   stroke-width=\"3\" fill=\"none\" \/>\n   &lt;path d=\"M 175 200 l 150 0\" stroke=\"green\" stroke-width=\"3\"\n   fill=\"none\" \/>\n   &lt;path d=\"M 100 350 q 150 -300 300 0\" stroke=\"blue\"\n   stroke-width=\"5\" fill=\"none\" \/>\n   &lt;!-- \u041f\u043e\u043c\u0435\u0442\u0438\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0442\u043e\u0447\u043a\u0438 -->\n   &lt;g stroke=\"black\" stroke-width=\"3\" fill=\"black\">\n     &lt;circle id=\"pointA\" cx=\"100\" cy=\"350\" r=\"3\" \/>\n     &lt;circle id=\"pointB\" cx=\"250\" cy=\"50\" r=\"3\" \/>\n     &lt;circle id=\"pointC\" cx=\"400\" cy=\"350\" r=\"3\" \/>\n   &lt;\/g>\n   &lt;!-- \u041f\u043e\u0441\u0442\u0430\u0432\u0438\u043c \u043c\u0435\u0442\u043a\u0438 \u0442\u043e\u0447\u0435\u043a -->\n   &lt;g font-size=\"30\" font-family=\"sans-serif\" fill=\"black\" stroke=\"none\"\n   text-anchor=\"middle\">\n     &lt;text x=\"100\" y=\"350\" dx=\"-30\">A&lt;\/text>\n     &lt;text x=\"250\" y=\"50\" dy=\"-10\">B&lt;\/text>\n     &lt;text x=\"400\" y=\"350\" dx=\"30\">C&lt;\/text>\n   &lt;\/g>\n&lt;\/svg> \n\n<\/pre>\n\n\n\n<p>\u0421\u043b\u043e\u0436\u043d\u043e? \u0414\u0410!!!! \u0418\u043c\u0435\u043d\u043d\u043e \u0438\u0437-\u0437\u0430 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043d\u0442\u0443\u0440\u043e\u0432 \u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 SVG \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0438.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">&lt;text><\/h3>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG\/Element\/text\">https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG\/Element\/text<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"293\" height=\"74\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2022\/01\/image-100.png\" alt=\"\" class=\"wp-image-2827\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"356\" height=\"96\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2022\/01\/image-101.png\" alt=\"\" class=\"wp-image-2828\" srcset=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2022\/01\/image-101.png 356w, https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2022\/01\/image-101-300x81.png 300w\" sizes=\"auto, (max-width: 356px) 100vw, 356px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"385\" height=\"38\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2022\/01\/image-102.png\" alt=\"\" class=\"wp-image-2829\" srcset=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2022\/01\/image-102.png 385w, https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2022\/01\/image-102-300x30.png 300w\" sizes=\"auto, (max-width: 385px) 100vw, 385px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"278\" height=\"48\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2022\/01\/image-103.png\" alt=\"\" class=\"wp-image-2830\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"jp_heading\" id=\"SVG-\u0442\u0435\u043a\u0441\u0442\">SVG \u0442\u0435\u043a\u0441\u0442<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">SVG \u0442\u0435\u043a\u0441\u0442<\/h1>\n\n\n\n<p>\u0414\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;text&gt;.<\/p>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u21161<\/strong><\/p>\n\n\n\n<p>\u0412\u044b\u0432\u043e\u0434\u0438\u043c \u0442\u0435\u043a\u0441\u0442:<\/p>\n\n\n\n<p><span style=\"color:#cc0616\" class=\"has-inline-color\">\u042f \u043b\u044e\u0431\u043b\u044e SVG!<\/span><\/p>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"30\" width=\"200\">\n   &lt;text x=\"0\" y=\"15\" fill=\"red\">\u042f \u043b\u044e\u0431\u043b\u044e SVG!&lt;\/text>\n&lt;\/svg> \n\n<\/pre>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u21162<\/strong><\/p>\n\n\n\n<p>\u041f\u043e\u0432\u0435\u0440\u043d\u0435\u043c \u0442\u0435\u043a\u0441\u0442:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"93\" height=\"65\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-72.png\" alt=\"\" class=\"wp-image-1634\"\/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"60\" width=\"200\">\n   &lt;text x=\"0\" y=\"15\" fill=\"red\" transform=\"rotate(30 20,40)\">\u042f \u043b\u044e\u0431\u043b\u044e SVG&lt;\/text>\n&lt;\/svg> \n\n<\/pre>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u21163<\/strong><\/p>\n\n\n\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;text&gt; \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u043f\u043e\u0434\u0433\u0440\u0443\u043f\u043f, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0445 \u0438\u0437 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;tspan&gt;. \u041a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;tspan&gt; \u043c\u043e\u0436\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0441\u0432\u043e\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u0438 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438.<\/p>\n\n\n\n<p>\u0422\u0435\u043a\u0441\u0442 \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0442\u0440\u043e\u043a\u0430\u0445 (\u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c &lt;tspan&gt;):<\/p>\n\n\n\n<p><span style=\"color:#cc0616\" class=\"has-inline-color\">\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a:<\/span><\/p>\n\n\n\n<p><span style=\"color:#cc0616\" class=\"has-inline-color\">\u041f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430.<\/span><\/p>\n\n\n\n<p><span style=\"color:#cc0616\" class=\"has-inline-color\">\u0412\u0442\u043e\u0440\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430.<\/span><\/p>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"90\" width=\"200\">\n   &lt;text x=\"10\" y=\"20\" style=\"fill:red;\">\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a:\n     &lt;tspan x=\"10\" y=\"45\">\u041f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 .&lt;\/tspan>\n     &lt;tspan x=\"10\" y=\"70\">\u0412\u0442\u043e\u0440\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 .&lt;\/tspan>\n   &lt;\/text>\n&lt;\/svg> \n\n<\/pre>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u21164<\/strong><\/p>\n\n\n\n<p>\u0422\u0435\u043a\u0441\u0442 \u043a\u0430\u043a \u0441\u0441\u044b\u043b\u043a\u0430 (\u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c &lt;a&gt;):<\/p>\n\n\n\n<p><a target=\"_blank\" rel=\"noopener\"><span style=\"color:#cc0616\" class=\"has-inline-color\">\u042f \u043b\u044e\u0431\u043b\u044e SVG!<\/span><\/a><\/p>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"30\" width=\"200\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n   &lt;a xlink:href=\"http:\/\/msiter.ru\/\" target=\"_blank\">\n     &lt;text x=\"0\" y=\"15\" fill=\"red\">\u042f \u043b\u044e\u0431\u043b\u044e SVG!&lt;\/text>\n   &lt;\/a>\n&lt;\/svg>\n<\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p class=\"jp_heading\" id=\"SVG-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e-stroke\">SVG \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e stroke<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">SVG \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e stroke<\/h1>\n\n\n\n<p>SVG \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0448\u0438\u0440\u043e\u043a\u0438\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0445 \u0437\u0430 \u0441\u0442\u0438\u043b\u044c \u043a\u043e\u043d\u0442\u0443\u0440\u043e\u0432 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u0438\u0433\u0443\u0440. \u042d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438\u043c\u0435\u044e\u0442 \u0432\u0438\u0434 &#171;<strong>stroke-*<\/strong>&#171;. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>stroke<\/li><li>stroke-width<\/li><li>stroke-linecap<\/li><li>stroke-dasharray<\/li><\/ul>\n\n\n\n<p>\u0412\u0441\u0435 \u044d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0432\u0438\u0434\u0430\u043c\u0438 \u043b\u0438\u043d\u0438\u0439, \u0442\u0435\u043a\u0441\u0442\u0430 \u0438 \u043a\u043e\u043d\u0442\u0443\u0440\u0430\u043c\u0438 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u0438\u0433\u0443\u0440, \u0432\u0440\u043e\u0434\u0435 \u043a\u0440\u0443\u0433\u0430.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">SVG \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e stroke<\/h3>\n\n\n\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e&nbsp;<strong>stroke<\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0446\u0432\u0435\u0442 \u043b\u0438\u043d\u0438\u0438, \u0442\u0435\u043a\u0441\u0442\u0430 \u0438\u043b\u0438 \u043a\u043e\u043d\u0442\u0443\u0440\u0430 (\u043e\u0431\u0432\u043e\u0434\u043a\u0438) \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"220\" height=\"50\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-73.png\" alt=\"\" class=\"wp-image-1638\"\/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"80\" width=\"300\">\n   &lt;g fill=\"none\">\n     &lt;path stroke=\"red\" d=\"M5 20 l215 0\" \/>\n     &lt;path stroke=\"black\" d=\"M5 40 l215 0\" \/>\n     &lt;path stroke=\"blue\" d=\"M5 60 l215 0\" \/>\n   &lt;\/g>\n&lt;\/svg> \n\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">SVG \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e stroke-width<\/h3>\n\n\n\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e&nbsp;<strong>stroke-width<\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0442\u043e\u043b\u0449\u0438\u043d\u0443 \u043b\u0438\u043d\u0438\u0438, \u0442\u0435\u043a\u0441\u0442\u0430 \u0438\u043b\u0438 \u043a\u043e\u043d\u0442\u0443\u0440\u0430 (\u043e\u0431\u0432\u043e\u0434\u043a\u0438) \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"220\" height=\"52\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-74.png\" alt=\"\" class=\"wp-image-1640\"\/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"80\" width=\"300\">\n   &lt;g fill=\"none\" stroke=\"black\">\n     &lt;path stroke-width=\"2\" d=\"M5 20 l215 0\" \/>\n     &lt;path stroke-width=\"4\" d=\"M5 40 l215 0\" \/>\n     &lt;path stroke-width=\"6\" d=\"M5 60 l215 0\" \/>\n   &lt;\/g>\n&lt;\/svg> \n\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">SVG \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e stroke-linecap<\/h3>\n\n\n\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e&nbsp;<strong>stroke-linecap<\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0442\u0438\u043f\u044b \u043a\u043e\u043d\u0446\u043e\u0432 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0445 \u043b\u0438\u043d\u0438\u0439:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"227\" height=\"54\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-75.png\" alt=\"\" class=\"wp-image-1641\"\/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"80\" width=\"300\">\n   &lt;g fill=\"none\" stroke=\"black\" stroke-width=\"6\">\n     &lt;path stroke-linecap=\"butt\" d=\"M5 20 l215 0\" \/>\n     &lt;path stroke-linecap=\"round\" d=\"M5 40 l215 0\" \/>\n     &lt;path stroke-linecap=\"square\" d=\"M5 60 l215 0\" \/>\n   &lt;\/g>\n&lt;\/svg> \n\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">SVG \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e stroke-dasharray<\/h3>\n\n\n\n<p>\u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e&nbsp;<strong>stroke-dasharray<\/strong>&nbsp;\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u0435\u0440\u044b\u0432\u0438\u0441\u0442\u044b\u0445 \u043b\u0438\u043d\u0438\u0439:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"228\" height=\"50\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-76.png\" alt=\"\" class=\"wp-image-1642\"\/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"80\" width=\"300\">\n   &lt;g fill=\"none\" stroke=\"black\" stroke-width=\"4\">\n     &lt;path stroke-dasharray=\"5,5\" d=\"M5 20 l215 0\" \/>\n     &lt;path stroke-dasharray=\"10,10\" d=\"M5 40 l215 0\" \/>\n     &lt;path stroke-dasharray=\"20,10,5,5,5,10\" d=\"M5 60 l215 0\" \/>\n   &lt;\/g>\n&lt;\/svg><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p class=\"jp_heading\" id=\"SVG-\u0444\u0438\u043b\u044c\u0442\u0440\u044b\">SVG \u0444\u0438\u043b\u044c\u0442\u0440\u044b<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">SVG \u0444\u0438\u043b\u044c\u0442\u0440\u044b<\/h1>\n\n\n\n<p>SVG \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b SVG \u0433\u0440\u0430\u0444\u0438\u043a\u0435.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">&lt;defs&gt; \u0438 &lt;filter&gt;<\/h3>\n\n\n\n<p>\u0412\u0441\u0435 SVG \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;defs&gt;. \u042d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;defs&gt; \u044d\u0442\u043e \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043e\u0442 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 &#171;definitions&#187; (<em>\u043f\u0435\u0440<\/em>. &#171;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f&#187;) \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (\u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u0444\u0438\u043b\u044c\u0442\u0440\u044b).<\/p>\n\n\n\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;filter&gt; \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f SVG \u0444\u0438\u043b\u044c\u0442\u0440\u0430. \u0423 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;filter&gt; \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0437\u0430\u0434\u0430\u043d \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>id<\/em><\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u0442 \u0444\u0438\u043b\u044c\u0442\u0440. \u0413\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0437\u0430\u0442\u0435\u043c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u044d\u0442\u043e\u0442 \u0444\u0438\u043b\u044c\u0442\u0440.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b SVG \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432<\/h3>\n\n\n\n<p>\u0412 SVG \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>&lt;feBlend&gt; &#8212; \u0444\u0438\u043b\u044c\u0442\u0440 \u0434\u043b\u044f \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/li><li>&lt;feColorMatrix&gt; &#8212; \u0444\u0438\u043b\u044c\u0442\u0440 \u0434\u043b\u044f \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0446\u0432\u0435\u0442\u043e\u0432<\/li><li>&lt;feComponentTransfer&gt;<\/li><li>&lt;feComposite&gt;<\/li><li>&lt;feConvolveMatrix&gt;<\/li><li>&lt;feDiffuseLighting&gt;<\/li><li>&lt;feDisplacementMap&gt;<\/li><li>&lt;feFlood&gt;<\/li><li>&lt;feGaussianBlur&gt;<\/li><li>&lt;feImage&gt;<\/li><li>&lt;feMerge&gt;<\/li><li>&lt;feMorphology&gt;<\/li><li>&lt;feOffset&gt; &#8212; \u0444\u0438\u043b\u044c\u0442\u0440 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0442\u0435\u043d\u0435\u0439<\/li><li>&lt;feSpecularLighting&gt;<\/li><li>&lt;feTile&gt;<\/li><li>&lt;feTurbulence&gt;<\/li><li>&lt;feDistantLight&gt; &#8212; \u0444\u0438\u043b\u044c\u0442\u0440 \u0434\u043b\u044f \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u0438\u044f<\/li><li>&lt;fePointLight&gt; &#8212; \u0444\u0438\u043b\u044c\u0442\u0440 \u0434\u043b\u044f \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u0438\u044f<\/li><li>&lt;feSpotLight&gt; &#8212; \u0444\u0438\u043b\u044c\u0442\u0440 \u0434\u043b\u044f \u043e\u0441\u0432\u0435\u0449\u0435\u043d\u0438\u044f<\/li><\/ul>\n\n\n\n<p>\u0421 \u043b\u044e\u0431\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c SVG \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432!<\/p>\n\n\n\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0433\u043b\u0430\u0432\u0435&nbsp;<em>\u0423\u0447\u0435\u0431\u043d\u0438\u043a\u0430 \u043f\u043e SVG \u0433\u0440\u0430\u0444\u0438\u043a\u0435<\/em>&nbsp;\u043c\u044b \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f SVG \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u0441\u043c\u043e\u0433\u043b\u0438 \u0441\u0435\u0431\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 SVG \u0433\u0440\u0430\u0444\u0438\u043a\u0438.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u042d\u0444\u0444\u0435\u043a\u0442 \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u044f<\/h3>\n\n\n\n<p>\u0424\u0438\u043b\u044c\u0442\u0440 &lt;feGaussianBlur&gt;.<\/p>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440<\/strong><\/p>\n\n\n\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;feGaussianBlur&gt;, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442 \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u044f:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"106\" height=\"107\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-77.png\" alt=\"\" class=\"wp-image-1643\"\/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"110\" width=\"110\">\n   &lt;defs>\n     &lt;filter id=\"f0\" x=\"0\" y=\"0\">\n       &lt;feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"15\" \/>\n     &lt;\/filter>\n   &lt;\/defs>\n   &lt;rect width=\"90\" height=\"90\" stroke=\"green\" stroke-width=\"3\" fill=\"yellow\" filter=\"url(#f0)\" \/>\n&lt;\/svg> \n\n<\/pre>\n\n\n\n<p>\u041e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>id<\/em><\/strong>&nbsp;\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;filter&gt; \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0438\u043c\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u0430<\/li><li>\u042d\u0444\u0444\u0435\u043a\u0442 \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u044f \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;feGaussianBlur&gt;<\/li><li>\u0427\u0430\u0441\u0442\u044c&nbsp;<strong><em>in=&#187;SourceGraphic&#187;<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u0447\u0442\u043e \u044d\u0444\u0444\u0435\u043a\u0442 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/li><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>stdDeviation<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u044f<\/li><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>filter<\/em><\/strong>&nbsp;\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;rect&gt; \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u043c &#171;f1&#187;<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0442\u0435\u043d\u0438 (&lt;feOffset&gt;)<\/h3>\n\n\n\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0442\u0435\u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;feOffset&gt;. \u0418\u0434\u0435\u044f \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0431\u0435\u0440\u0435\u0442\u0441\u044f \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 SVG (\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442) \u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0432 XY \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u044f\u0445.<\/p>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440<\/strong><\/p>\n\n\n\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a (\u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;feOffset&gt;), \u0430 \u0437\u0430\u0442\u0435\u043c \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0434\u0432\u0438\u043d\u0443\u0442\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 (\u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;feBlend&gt;):<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"117\" height=\"116\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-78.png\" alt=\"\" class=\"wp-image-1644\"\/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"120\" width=\"120\">\n   &lt;defs>\n     &lt;filter id=\"f1\" x=\"0\" y=\"0\" width=\"200%\" height=\"200%\">\n       &lt;feOffset result=\"offOut\" in=\"SourceGraphic\" dx=\"20\" dy=\"20\" \/>\n       &lt;feBlend in=\"SourceGraphic\" in2=\"offOut\" mode=\"normal\" \/>\n     &lt;\/filter>\n   &lt;\/defs>\n   &lt;rect width=\"90\" height=\"90\" stroke=\"green\" stroke-width=\"3\" fill=\"yellow\" filter=\"url(#f1)\" \/>\n&lt;\/svg> \n\n<\/pre>\n\n\n\n<p>\u041e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>id<\/em><\/strong>&nbsp;\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;filter&gt; \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0438\u043c\u044f \u0444\u0438\u043b\u044c\u0442\u0440\u0430<\/li><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>filter<\/em><\/strong>&nbsp;\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;rect&gt; \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u043c &#171;f1&#187;<\/li><\/ul>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u0434\u0432\u0438\u043d\u0443\u0442\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u0435\u043b\u0430\u0435\u043c \u0440\u0430\u0437\u043c\u044b\u0442\u044b\u043c (\u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;feGaussianBlur&gt;):<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"121\" height=\"125\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-79.png\" alt=\"\" class=\"wp-image-1645\"\/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"140\" width=\"140\">\n   &lt;defs>\n     &lt;filter id=\"f2\" x=\"0\" y=\"0\" width=\"200%\" height=\"200%\">\n       &lt;feOffset result=\"offOut\" in=\"SourceGraphic\" dx=\"20\" dy=\"20\" \/>\n       &lt;feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"10\" \/>\n       &lt;feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" \/>\n     &lt;\/filter>\n   &lt;\/defs>\n   &lt;rect width=\"90\" height=\"90\" stroke=\"green\" stroke-width=\"3\" fill=\"yellow\" filter=\"url(#f2)\" \/>\n&lt;\/svg> \n\n<\/pre>\n\n\n\n<p>\u041e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>stdDeviation<\/em><\/strong>&nbsp;\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;feGaussianBlur&gt; \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u044f<\/li><\/ul>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0435\u043b\u0430\u0435\u043c \u0442\u0435\u043d\u044c \u0447\u0435\u0440\u043d\u043e\u0439:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"129\" height=\"126\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-80.png\" alt=\"\" class=\"wp-image-1646\"\/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"140\" width=\"140\">\n   &lt;defs>\n     &lt;filter id=\"f3\" x=\"0\" y=\"0\" width=\"200%\" height=\"200%\">\n       &lt;feOffset result=\"offOut\" in=\"SourceAlpha\" dx=\"20\" dy=\"20\" \/>\n       &lt;feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"10\" \/>\n       &lt;feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" \/>\n     &lt;\/filter>\n   &lt;\/defs>\n   &lt;rect width=\"90\" height=\"90\" stroke=\"green\" stroke-width=\"3\" fill=\"yellow\" filter=\"url(#f3)\" \/>\n&lt;\/svg> \n\n<\/pre>\n\n\n\n<p>\u041e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0417\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430&nbsp;<strong><em>in<\/em><\/strong>&nbsp;\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;feOffset&gt; \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043e \u043d\u0430 &#171;SourceAlpha&#187;, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0430\u043b\u044c\u0444\u0430-\u043a\u0430\u043d\u0430\u043b \u0432\u043c\u0435\u0441\u0442\u043e \u0432\u0441\u0435\u0433\u043e RGBA \u043d\u0430\u0431\u043e\u0440\u0430 \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u044f<\/li><\/ul>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0442\u0435\u043d\u044c \u043a\u0430\u043a \u0446\u0432\u0435\u0442:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"127\" height=\"124\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-81.png\" alt=\"\" class=\"wp-image-1647\"\/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"140\" width=\"140\">\n   &lt;defs>\n     &lt;filter id=\"f4\" x=\"0\" y=\"0\" width=\"200%\" height=\"200%\">\n       &lt;feOffset result=\"offOut\" in=\"SourceGraphic\" dx=\"20\" dy=\"20\" \/>\n       &lt;feColorMatrix result=\"matrixOut\" in=\"offOut\" type=\"matrix\"\n       values=\"0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0\" \/>\n       &lt;feGaussianBlur result=\"blurOut\" in=\"matrixOut\" stdDeviation=\"10\" \/>\n       &lt;feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" \/>\n     &lt;\/filter>\n   &lt;\/defs>\n   &lt;rect width=\"90\" height=\"90\" stroke=\"green\" stroke-width=\"3\" fill=\"yellow\" filter=\"url(#f4)\" \/>\n&lt;\/svg> \n\n<\/pre>\n\n\n\n<p>\u041e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0424\u0438\u043b\u044c\u0442\u0440 &lt;feColorMatrix&gt; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0446\u0432\u0435\u0442\u043e\u0432 \u0441\u0434\u0432\u0438\u043d\u0443\u0442\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u0447\u0435\u0440\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430. \u0422\u0440\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f &#8216;0.2&#8217; \u0432 \u043c\u0430\u0442\u0440\u0438\u0446\u0435 \u0443\u043c\u043d\u043e\u0436\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043a\u0440\u0430\u0441\u043d\u043e\u0433\u043e, \u0437\u0435\u043b\u0435\u043d\u043e\u0433\u043e \u0438 \u0441\u0438\u043d\u0435\u0433\u043e \u043a\u0430\u043d\u0430\u043b\u043e\u0432. \u0423\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u0442 \u0446\u0432\u0435\u0442 \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u0447\u0435\u0440\u043d\u043e\u0433\u043e (\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 = 0)<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p class=\"jp_heading\" id=\"SVG-\u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b\">SVG \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">SVG \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b<\/h1>\n\n\n\n<p>\u0413\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u2014 \u044d\u0442\u043e \u043f\u043b\u0430\u0432\u043d\u044b\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043e\u0434\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0432 \u0434\u0440\u0443\u0433\u043e\u0439. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c, \u043a \u043e\u0434\u043d\u043e\u043c\u0443 \u0438 \u0442\u043e\u043c\u0443 \u0436\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0445 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432.<\/p>\n\n\n\n<p>\u0412 SVG \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u0432\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0442\u0438\u043f\u0430 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u0432 \u2014 \u043b\u0438\u043d\u0435\u0439\u043d\u044b\u0439 \u0438 \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n\n\n\n<p>SVG \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0438\u0435 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b, \u0434\u043e\u043b\u0436\u043d\u044b \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;defs&gt;. \u042d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;defs&gt; \u044d\u0442\u043e \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043e\u0442 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u0433\u043e \u0441\u043b\u043e\u0432\u0430 &#171;definitions&#187; (\u043f\u0435\u0440. &#171;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f&#187;) \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (\u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u044b).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u041b\u0438\u043d\u0435\u0439\u043d\u044b\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 &#8212; &lt;linearGradient&gt;<\/h3>\n\n\n\n<p>\u0427\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043b\u0438\u043d\u0435\u0439\u043d\u044b\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442, \u0432 SVG \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;linearGradient&gt;.<\/p>\n\n\n\n<p>\u041b\u0438\u043d\u0435\u0439\u043d\u044b\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c, \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u0438\u043b\u0438 \u0443\u0433\u043b\u043e\u0432\u044b\u043c:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0413\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b y1 \u0438 y2 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435, \u0430 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b x1 \u0438 x2 \u0440\u0430\u0437\u043d\u044b\u0435<\/li><li>\u0412\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b x1 \u0438 x2 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435, \u0430 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b y1 \u0438 y2 \u0440\u0430\u0437\u043d\u044b\u0435<\/li><li>\u0423\u0433\u043b\u043e\u0432\u043e\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b x1 \u0438 x2 \u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b y1 \u0438 y2 \u0440\u0430\u0437\u043d\u044b\u0435<\/li><\/ul>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u21161<\/strong><\/p>\n\n\n\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u044d\u043b\u043b\u0438\u043f\u0441 \u0441 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u043b\u0438\u043d\u0435\u0439\u043d\u044b\u043c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c \u043e\u0442 \u0436\u0435\u043b\u0442\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u043a \u043a\u0440\u0430\u0441\u043d\u043e\u043c\u0443:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"174\" height=\"113\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-83.png\" alt=\"\" class=\"wp-image-1649\"\/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"150\" width=\"400\">\n   &lt;defs>\n     &lt;linearGradient id=\"grad1\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n       &lt;stop offset=\"0%\" style=\"stop-color:rgb(255,255,0);stop-opacity:1\" \/>\n       &lt;stop offset=\"100%\" style=\"stop-color:rgb(255,0,0);stop-opacity:1\" \/>\n     &lt;\/linearGradient>\n   &lt;\/defs>\n   &lt;ellipse cx=\"200\" cy=\"70\" rx=\"85\" ry=\"55\" fill=\"url(#grad1)\" \/>\n&lt;\/svg> \n\n<\/pre>\n\n\n\n<p>\u041e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>id<\/em><\/strong>&nbsp;\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;linearGradient&gt; \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0438\u043c\u044f \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430<\/li><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b&nbsp;<strong><em>x1<\/em><\/strong>,&nbsp;<strong><em>x2<\/em><\/strong>,&nbsp;<strong><em>y1<\/em><\/strong>,&nbsp;<strong><em>y2<\/em><\/strong>&nbsp;\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;linearGradient&gt; \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430<\/li><li>\u0426\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0438\u0437 \u0434\u0432\u0443\u0445 \u0438\u043b\u0438 \u0431\u043e\u043b\u0435\u0435 \u0446\u0432\u0435\u0442\u043e\u0432. \u041a\u0430\u0436\u0434\u044b\u0439 \u0446\u0432\u0435\u0442 \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0442\u0435\u0433\u0430 &lt;stop&gt;. \u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>offset<\/em><\/strong>&nbsp;\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u0433\u0434\u0435 \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0438 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f<\/li><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>fill<\/em><\/strong>&nbsp;\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;ellipse&gt; \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c<\/li><\/ul>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u21162<\/strong><\/p>\n\n\n\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u044d\u043b\u043b\u0438\u043f\u0441 \u0441 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u043b\u0438\u043d\u0435\u0439\u043d\u044b\u043c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c \u043e\u0442 \u0436\u0435\u043b\u0442\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u043a \u043a\u0440\u0430\u0441\u043d\u043e\u043c\u0443:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"174\" height=\"116\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-84.png\" alt=\"\" class=\"wp-image-1650\"\/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"150\" width=\"400\">\n   &lt;defs>\n     &lt;linearGradient id=\"grad2\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n       &lt;stop offset=\"0%\" style=\"stop-color:rgb(255,0,0);stop-opacity:1\" \/>\n       &lt;stop offset=\"100%\" style=\"stop-color:rgb(255,255,0);stop-opacity:1\" \/>\n     &lt;\/linearGradient>\n   &lt;\/defs>\n   &lt;ellipse cx=\"200\" cy=\"70\" rx=\"85\" ry=\"55\" fill=\"url(#grad2)\" \/>\n&lt;\/svg> \n\n<\/pre>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u21163<\/strong><\/p>\n\n\n\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u044d\u043b\u043b\u0438\u043f\u0441 \u0441 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u043b\u0438\u043d\u0435\u0439\u043d\u044b\u043c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c \u043e\u0442 \u0436\u0435\u043b\u0442\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u043a \u043a\u0440\u0430\u0441\u043d\u043e\u043c\u0443 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0442\u0435\u043a\u0441\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u043b\u043b\u0438\u043f\u0441\u0430:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"171\" height=\"113\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-85.png\" alt=\"\" class=\"wp-image-1651\"\/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"150\" width=\"400\">\n   &lt;defs>\n     &lt;linearGradient id=\"grad3\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n       &lt;stop offset=\"0%\" style=\"stop-color:rgb(255,255,0);stop-opacity:1\" \/>\n       &lt;stop offset=\"100%\" style=\"stop-color:rgb(255,0,0);stop-opacity:1\" \/>\n     &lt;\/linearGradient>\n   &lt;\/defs>\n   &lt;ellipse cx=\"200\" cy=\"70\" rx=\"85\" ry=\"55\" fill=\"url(#grad3)\" \/>\n   &lt;text fill=\"#ffffff\" font-size=\"45\" font-family=\"Verdana\" x=\"150\" y=\"86\">SVG&lt;\/text>\n&lt;\/svg> \n\n<\/pre>\n\n\n\n<p>\u041e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;text&gt; \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0442\u0435\u043a\u0441\u0442<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u0420\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442 &#8212; &lt;radialGradient&gt;<\/h3>\n\n\n\n<p>\u0427\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;radialGradient&gt;.<\/p>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u21161<\/strong><\/p>\n\n\n\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u044d\u043b\u043b\u0438\u043f\u0441 \u0441 \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u043c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c \u043e\u0442 \u0431\u0435\u043b\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u043a \u0441\u0438\u043d\u0435\u043c\u0443:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"174\" height=\"116\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-86.png\" alt=\"\" class=\"wp-image-1652\"\/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"150\" width=\"500\">\n   &lt;defs>\n     &lt;radialGradient id=\"grad1\" cx=\"50%\" cy=\"50%\" r=\"50%\" fx=\"50%\" fy=\"50%\">\n       &lt;stop offset=\"0%\" style=\"stop-color:rgb(255,255,255);stop-opacity:0\" \/>\n       &lt;stop offset=\"100%\" style=\"stop-color:rgb(0,0,255);stop-opacity:1\" \/>\n     &lt;\/radialGradient>\n   &lt;\/defs>\n   &lt;ellipse cx=\"200\" cy=\"70\" rx=\"85\" ry=\"55\" fill=\"url(#grad1)\" \/>\n&lt;\/svg> \n\n<\/pre>\n\n\n\n<p>\u041e\u0431\u044a\u044f\u0441\u043d\u0435\u043d\u0438\u0435:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>id<\/em><\/strong>&nbsp;\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;radialGradient&gt; \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0438\u043c\u044f \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430<\/li><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b&nbsp;<strong><em>cx<\/em><\/strong>,&nbsp;<strong><em>cy<\/em><\/strong>&nbsp;\u0438&nbsp;<strong><em>r<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u043a\u0440\u0443\u0433,&nbsp;<strong><em>fx<\/em><\/strong>&nbsp;\u0438&nbsp;<strong><em>fy<\/em><\/strong>&nbsp;\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u043a\u0440\u0443\u0433<\/li><li>\u0426\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0438\u0437 \u0434\u0432\u0443\u0445 \u0438\u043b\u0438 \u0431\u043e\u043b\u0435\u0435 \u0446\u0432\u0435\u0442\u043e\u0432. \u041a\u0430\u0436\u0434\u044b\u0439 \u0446\u0432\u0435\u0442 \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0442\u0435\u0433\u0430 &lt;stop&gt;. \u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>offset<\/em><\/strong>&nbsp;\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u0433\u0434\u0435 \u0446\u0432\u0435\u0442 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0438 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f<\/li><li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<strong><em>fill<\/em><\/strong>&nbsp;\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 &lt;ellipse&gt; \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c<\/li><\/ul>\n\n\n\n<p><strong>\u041f\u0440\u0438\u043c\u0435\u0440 \u21162<\/strong><\/p>\n\n\n\n<p>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u044d\u043b\u043b\u0438\u043f\u0441 \u0441 \u0440\u0430\u0434\u0438\u0430\u043b\u044c\u043d\u044b\u043c \u0433\u0440\u0430\u0434\u0438\u0435\u043d\u0442\u043e\u043c \u043e\u0442 \u0431\u0435\u043b\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u043a \u0441\u0438\u043d\u0435\u043c\u0443:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"174\" height=\"112\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-87.png\" alt=\"\" class=\"wp-image-1653\"\/><\/figure>\n\n\n\n<p>SVG \u043a\u043e\u0434:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;svg height=\"150\" width=\"500\">\n   &lt;defs>\n     &lt;radialGradient id=\"grad2\" cx=\"30%\" cy=\"30%\" r=\"30%\" fx=\"50%\" fy=\"50%\">\n       &lt;stop offset=\"0%\" style=\"stop-color:rgb(255,255,255);stop-opacity:0\" \/>\n       &lt;stop offset=\"100%\" style=\"stop-color:rgb(0,0,255);stop-opacity:1\" \/>\n     &lt;\/radialGradient>\n   &lt;\/defs>\n   &lt;ellipse cx=\"200\" cy=\"70\" rx=\"85\" ry=\"55\" fill=\"url(#grad2)\" \/>\n&lt;\/svg><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">&lt;image><\/h3>\n\n\n\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;image>\u00a0\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 SVG \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442.<\/p>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG\/Element\/image\">https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG\/Element\/image<\/a><\/p>\n\n\n\n<p class=\"jp_heading\" id=\"#SVG-\u0438-\u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438\">SVG \u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438<\/p>\n\n\n\n<p>\u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;body>\n\t&lt;svg class=\"svg_1\" width=\"40mm\" height=\"10mm\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t&lt;image href=\"images\/p.cbm.ua_1123123.png\" height=\"10mm\" width=\"40mm\"\/>\n\t&lt;\/svg>\n\n\t&lt;svg class=\"svg_1\" width=\"40mm\" height=\"10mm\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t&lt;image href=\"images\/p.cbm.ua_1123123.png\" \/>\n\t&lt;br> \n&lt;\/body><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"319\" height=\"50\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-88.png\" alt=\"\" class=\"wp-image-1717\" srcset=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-88.png 319w, https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2021\/11\/image-88-300x47.png 300w\" sizes=\"auto, (max-width: 319px) 100vw, 319px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p class=\"jp_heading\" id=\"\u0427\u0442\u043e-\u0434\u0435\u043b\u0430\u0435\u0442-\u0430\u0442\u0440\u0438\u0431\u0443\u0442-SVG-xmlns?\">\u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 SVG xmlns?<\/p>\n\n\n\n<p>\u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;body>\n    &lt;svg class=\"svg_1\" width=\"40mm\" height=\"10mm\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        &lt;image href=\"images\/p.cbm.ua_1123123.png\" height=\"10mm\" width=\"40mm\"\/>\n    &lt;\/svg>\n&lt;\/body><\/pre>\n\n\n\n<p>\u0412 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0445 XML \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u0438\u043d\u0430\u0434\u043b\u0435\u0436\u0430\u0442 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430\u043c \u0438\u043c\u0435\u043d. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0442\u0438\u0442\u044c \u0441\u0442\u043e\u043b\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u0437 \u0440\u0430\u0437\u043d\u044b\u0445 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u044d\u043b\u0435\u043c\u0435\u043d\u0442 SVG&nbsp;<code><span class=\"has-inline-color has-nv-c-2-color\">&lt;a&gt;<\/span><\/code>&nbsp;\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 HTML&nbsp;<code><span class=\"has-inline-color has-nv-c-2-color\">&lt;a&gt;<\/span><\/code>&nbsp;\u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0438\u0442\u044c, \u0435\u0441\u043b\u0438 \u043e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f svg:<span class=\"has-inline-color has-nv-c-2-color\">a<\/span>, \u0430 \u0434\u0440\u0443\u0433\u043e\u0439 html:<span class=\"has-inline-color has-nv-c-2-color\">a<\/span><\/p>\n\n\n\n<p>xmlns:xlink \u0433\u043e\u0432\u043e\u0440\u0438\u0442, \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u043c xlink \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 xlink UAs, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u044e\u0442 \u044d\u0442\u0443 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e.<\/p>\n\n\n\n<p>xmlns \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0438\u043c\u0435\u043d \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u0432, \u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c&nbsp;<code><span class=\"has-inline-color has-nv-c-2-color\">&lt;a&gt;<\/span><\/code>&nbsp;, \u0430 \u043d\u0435 namespace:<span class=\"has-inline-color has-nv-c-2-color\">a<\/span>, \u0438 UA \u0437\u043d\u0430\u0435\u0442, \u0447\u0442\u043e \u044d\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 SVG&nbsp;<code><span class=\"has-inline-color has-nv-c-2-color\">&lt;a&gt;<\/span><\/code>&nbsp;, \u0430 \u043d\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 HTML&nbsp;<code><span class=\"has-inline-color has-nv-c-2-color\">&lt;a&gt;<\/span><\/code>&nbsp;\u0438\u043b\u0438 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442&nbsp;<code><span class=\"has-inline-color has-nv-c-2-color\">&lt;a&gt;<\/span><\/code>&nbsp;, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u0441\u0430\u043c\u0438 \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0434\u043b\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">&lt;use&gt;<\/h1>\n\n\n\n<p>\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u00a0<strong><code>&lt;use><\/code><\/strong>\u00a0\u0431\u0435\u0440\u0451\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u0437 SVG-\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0438 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u0442 \u0438\u0445 \u0433\u0434\u0435-\u0442\u043e \u0435\u0449\u0451.<br><a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG\/Element\/use\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG\/Element\/use<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"222\" height=\"77\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2022\/01\/image-96.png\" alt=\"\" class=\"wp-image-2817\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">transform <\/h3>\n\n\n\n<p>\u0412 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435\u00a0<code>transform<\/code>\u00a0\u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0439, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0445 \u043a\u0430\u043a \u043a \u0441\u0430\u043c\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u0442\u0430\u043a \u0438 \u043a \u0435\u0433\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c. \u041e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0432 \u0441\u043f\u0438\u0441\u043a\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0431\u0435\u043b\u0430\u043c\u0438 \u0438\u043b\u0438 \u0437\u0430\u043f\u044f\u0442\u044b\u043c\u0438 \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0441\u043b\u0435\u0432\u0430\u00a0\u043d\u0430\u043f\u0440\u0430\u0432\u043e.<br><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG\/Element\" data-type=\"URL\" data-id=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG\/Element\" target=\"_blank\">\u0421\u043f\u0440\u0430\u0432\u043e\u0447\u043d\u0438\u043a SVG \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/a> &#8212; <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG\/Element\" data-type=\"URL\" data-id=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG\/Element\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG\/Element<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"520\" height=\"479\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2022\/01\/image-99.png\" alt=\"\" class=\"wp-image-2826\" srcset=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2022\/01\/image-99.png 520w, https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2022\/01\/image-99-300x276.png 300w\" sizes=\"auto, (max-width: 520px) 100vw, 520px\" \/><\/figure>\n\n\n\n<p><br><br><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG\/Attribute\" target=\"_blank\">\u0421\u043f\u0440\u0430\u0432\u043e\u0447\u043d\u0438\u043a SVG \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432<\/a> &#8212; <a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG\/Attribute\" target=\"_blank\">https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG\/Attribute<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"621\" height=\"402\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2022\/01\/image-98.png\" alt=\"\" class=\"wp-image-2821\" srcset=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2022\/01\/image-98.png 621w, https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2022\/01\/image-98-300x194.png 300w\" sizes=\"auto, (max-width: 621px) 100vw, 621px\" \/><\/figure>\n\n\n\n<p><br><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG\/Attribute\/transform\" target=\"_blank\">https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG\/Attribute\/transform<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG\/Attribute\/transform#%D1%82%D0%B8%D0%BF%D1%8B_%D0%BF%D1%80%D0%B5%D0%BE%D0%B1%D1%80%D0%B0%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B9\">\u0422\u0438\u043f\u044b \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0439<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"145\" height=\"130\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2022\/01\/image-97.png\" alt=\"\" class=\"wp-image-2820\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">transform &#8212; <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/SVG\/Attribute\">\u0421\u043f\u0440\u0430\u0432\u043e\u0447\u043d\u0438\u043a SVG \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432<\/a><\/h3>\n","protected":false},"excerpt":{"rendered":"<p>URL \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0413\u0440\u0430\u0444\u0438\u043a\u0430 Canvas&lt;canvas&gt;&nbsp;\u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 API \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f 2D-\u0433\u0440\u0430\u0444\u0438\u043a\u0438, \u0441&nbsp;\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c&nbsp;JavaScript. SVGSVG (Scalable Vector Graphics &#8212; \u043c\u0430\u0441\u0448\u0442\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) &#8212;&nbsp; &nbsp;\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0430\u043c \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u0432\u0438\u0434\u0435&nbsp;\u043b\u0438\u043d\u0438\u0439, \u043a\u0440\u0438\u0432\u044b\u0445 \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u0438\u0433\u0443\u0440. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0438\u0441\u0443\u043d\u043e\u043a \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430. WebGLWebGL &#8212; \u044d\u0442\u043e JavaScript API,&nbsp; \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u0435&nbsp;\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c 3D \u0438\u043b\u0438 2D \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f&nbsp; HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442&nbsp;&lt;canvas&gt;. \u042d\u0442\u0430 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442&hellip;&nbsp;<a href=\"https:\/\/1.cbm.ua\/?p=1580\" rel=\"bookmark\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 &raquo;<span class=\"screen-reader-text\">\u2764\ufe0f ___ \u0423\u0447\u0435\u0431\u043d\u0438\u043a HTML5 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u2013 SVG<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[7,99,110],"tags":[25],"class_list":["post-1580","post","type-post","status-publish","format-standard","hentry","category-html","category-99","category-110","tag-help"],"_links":{"self":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/1580","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1580"}],"version-history":[{"count":50,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/1580\/revisions"}],"predecessor-version":[{"id":6364,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/1580\/revisions\/6364"}],"wp:attachment":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1580"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1580"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1580"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}