{"id":461,"date":"2021-04-17T15:28:06","date_gmt":"2021-04-17T12:28:06","guid":{"rendered":"https:\/\/webcademy.ru\/blog\/?p=461"},"modified":"2024-03-30T02:36:49","modified_gmt":"2024-03-29T23:36:49","slug":"%d0%bf%d0%be%d0%b4%d0%ba%d0%bb%d1%8e%d1%87%d0%b0%d0%b5%d0%bc-svg-%d0%b8%d0%ba%d0%be%d0%bd%d0%ba%d1%83-%d0%bd%d0%b0-%d1%81%d0%b0%d0%b9%d1%82-%d0%b8-%d0%bc%d0%b5%d0%bd%d1%8f%d0%b5%d0%bc-%d1%86%d0%b2","status":"publish","type":"post","link":"https:\/\/webcademy.ru\/blog\/461\/","title":{"rendered":"\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c SVG-\u0438\u043a\u043e\u043d\u043a\u0443 \u043d\u0430 \u0441\u0430\u0439\u0442 \u0438 \u043c\u0435\u043d\u044f\u0435\u043c \u0446\u0432\u0435\u0442 \u0447\u0435\u0440\u0435\u0437 CSS"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\u0412 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0441\u0435\u0440\u0438\u044f\u0445&#8230;<\/h2>\n\n\n\n<p>\u0412 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0432\u044b\u044f\u0441\u043d\u0438\u043b\u0438, <a href=\"https:\/\/webcademy.ru\/blog\/403\/\">\u0432 \u0447\u0435\u043c \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043e\u0442 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u0445<\/a>. \u0422\u0435\u043f\u0435\u0440\u044c \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0439. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u043d\u0430\u0443\u0447\u0438\u043c\u0441\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u044d\u0442\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438.<\/p>\n\n\n\n<p>\u0412\u043e\u0437\u044c\u043c\u0435\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e \u043f\u0430\u043f\u043a\u0443 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0435\u0441\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u0430\u043f\u043a\u0430 \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f &#8212; \u0434\u043b\u044f \u0444\u0430\u0439\u043b\u043e\u0432 <code>.css<\/code>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0444\u0430\u0439\u043b <code>.html<\/code><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u0442\u0435\u0433 <code>&lt;img&gt;<\/code> \u0432 html<\/h2>\n\n\n\n<p>\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u043a\u0430\u043a \u0441 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u043e\u0439. \u0422\u0435\u0433 <code>&lt;img&gt;<\/code>, \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>src<\/code>, \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443. \u041c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b <code>&lt;img&gt;<\/code>, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>width<\/code>.<\/p>\n\n\n\n<p>HTML<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;h2&gt;\u0418\u043a\u043e\u043d\u043a\u0438&lt;\/h2&gt;\n&lt;img src=&quot;.\/img\/calendar.svg&quot; alt=&quot;Calendar&quot; width=&quot;102&quot;&gt;<\/pre><\/div>\n\n\n\n<p>\u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><span itemprop=\"image\" itemscope itemtype=\"https:\/\/schema.org\/ImageObject\"><img itemprop=\"url image\" loading=\"lazy\" decoding=\"async\" width=\"161\" height=\"174\"  src=\"https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/04\/svg-2l-2.jpg\" alt=\"\" class=\"wp-image-464\"\/><meta itemprop=\"width\" content=\"161\"><meta itemprop=\"height\" content=\"174\"><\/span><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0444\u043e\u043d\u0430 \u0432 .css<\/h2>\n\n\n\n<p>\u041c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c svg-\u0433\u0440\u0430\u0444\u0438\u043a\u0443 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0444\u043e\u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0427\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0444\u043e\u043d\u043e\u0432\u044b\u0435 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b. \u042d\u0442\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442, \u0432\u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0439\u0441\u044f \u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0438\u0439 \u043e\u0440\u043d\u0430\u043c\u0435\u043d\u0442.<\/p>\n\n\n\n<p>\u0422\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043d\u0430\u0448 \u043f\u0430\u0442\u0442\u0435\u0440\u043d:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><span itemprop=\"image\" itemscope itemtype=\"https:\/\/schema.org\/ImageObject\"><img itemprop=\"url image\" loading=\"lazy\" decoding=\"async\" width=\"120\" height=\"123\"  src=\"https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/04\/svg-2l-5.jpg\" alt=\"\" class=\"wp-image-468\"\/><meta itemprop=\"width\" content=\"120\"><meta itemprop=\"height\" content=\"123\"><\/span><\/figure>\n\n\n\n<p>\u0423\u043a\u0430\u0436\u0438\u0442\u0435 \u0432 html \u043d\u0443\u0436\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u0438 \u043f\u0440\u043e\u043f\u0438\u0448\u0438\u0442\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0444\u043e\u043d\u0430 background-image \u0432 \u0444\u0430\u0439\u043b\u0435 css. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>url()<\/code>, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0434\u0430\u0442\u044c \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c. <\/p>\n\n\n\n<p>HTML<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;h2&gt;\u0424\u043e\u043d\u043e\u0432\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f&lt;\/h2&gt;\n&lt;div class=&quot;block-bg&quot;&gt;&lt;\/div&gt;<\/pre><\/div>\n\n\n\n<p>CSS<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">\/* SVG \u0444\u043e\u043d\u043e\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 *\/\n.block-bg {\n    width: 600px;\n    height: 200px;\n    background-image: url('.\/..\/img\/bg-zigzag.svg');\n}<\/pre><\/div>\n\n\n\n<p>\u0412\u043e\u0442, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><span itemprop=\"image\" itemscope itemtype=\"https:\/\/schema.org\/ImageObject\"><img itemprop=\"url image\" loading=\"lazy\" decoding=\"async\" width=\"629\" height=\"278\"  src=\"https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/04\/svg-2l-6.jpg\" alt=\"\" class=\"wp-image-469\" srcset=\"https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/04\/svg-2l-6.jpg 629w, https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/04\/svg-2l-6-300x133.jpg 300w\" sizes=\"(max-width: 629px) 100vw, 629px\" \/><meta itemprop=\"width\" content=\"629\"><meta itemprop=\"height\" content=\"278\"><\/span><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u041e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c svg-\u0433\u0440\u0430\u0444\u0438\u043a\u0443 inline<\/h2>\n\n\n\n<p>\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0435\u0433\u0438 \u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u043f\u0440\u044f\u043c\u043e \u0432 \u043a\u043e\u0434\u0435. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c &#8212; \u043c\u044b \u043c\u043e\u0436\u0435\u043c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440,  \u043c\u0435\u043d\u044f\u0442\u044c \u0446\u0432\u0435\u0442, \u0438\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u043f\u043e \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044e \u043d\u0430 \u0438\u043a\u043e\u043d\u043a\u0443.<\/p>\n\n\n\n<p>\u0422\u0435\u0433 <code>&lt;svg&gt;<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f SVG \u0433\u0440\u0430\u0444\u0438\u043a\u0438. \u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0442\u0435\u0433\u0430 <code>&lt;path&gt;<\/code> \u0438 \u0435\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0444\u0438\u0433\u0443\u0440\u0430. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0438\u043a\u043e\u043d\u043a\u0430 YouTube \u0432 inline \u0444\u043e\u0440\u043c\u0430\u0442\u0435.<\/p>\n\n\n\n<p>HTML<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;svg class=&quot;youtube-icon&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 576 512&quot;&gt;\n   &lt;path d=&quot;M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z&quot;&gt;&lt;\/path&gt;\n&lt;\/svg&gt;<\/pre><\/div>\n\n\n\n<p>\u0421\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u0432 \u0444\u0430\u0439\u043b\u0435 .css \u043f\u043e \u043a\u043b\u0430\u0441\u0441\u0443 <code>youtube-icon<\/code>.<\/p>\n\n\n\n<p> \u0411\u0443\u0434\u0435\u043c \u043c\u0435\u043d\u044f\u0442\u044c \u0446\u0432\u0435\u0442 \u0438\u043a\u043e\u043d\u043a\u0438 \u043f\u043e \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <code>fill<\/code>.<\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:false,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">\/* SVG inline \u043a\u043e\u0434. \u0421\u043c\u0435\u043d\u0430 \u0446\u0432\u0435\u0442\u0430 \u043f\u043e \u0445\u043e\u0432\u0435\u0440\u0443 *\/\n.youtube-icon {\n    width: 64px;\n    height: 64px;\n    fill: black;\n}\n\n.youtube-icon:hover {\n    fill: red;\n}<\/pre><\/div>\n\n\n\n<p> \u0412\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><span itemprop=\"image\" itemscope itemtype=\"https:\/\/schema.org\/ImageObject\"><img itemprop=\"url image\" loading=\"lazy\" decoding=\"async\" width=\"288\" height=\"218\"  src=\"https:\/\/webcademy.ru\/blog\/wp-content\/uploads\/2021\/04\/svg-2l-8.gif\" alt=\"\" class=\"wp-image-474\"\/><meta itemprop=\"width\" content=\"288\"><meta itemprop=\"height\" content=\"218\"><\/span><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>\u041c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438 3 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f SVG-\u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u043d\u0430 \u0441\u0430\u0439\u0442: \u0442\u0435\u0433 <code>&lt;img><\/code>, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 CSS, \u0442\u0435\u0433 <code>&lt;svg><\/code>.<\/li><li>\u0423\u0437\u043d\u0430\u043b\u0438 \u043f\u0440\u043e \u0442\u043e, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u0446\u0432\u0435\u0442 SVG-\u0438\u043a\u043e\u043d\u043a\u0438 \u0447\u0435\u0440\u0435\u0437 CSS \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>fill<\/code>.<\/li><li>\u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0442\u0435\u0433\u0430\u043c <code>&lt;svg><\/code>, <code>&lt;path><\/code>, \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0435\u0449\u0451 \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u0443\u044e \u0433\u0440\u0430\u0444\u0438\u043a\u0443.<\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0412 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0441\u0435\u0440\u0438\u044f\u0445&#8230; \u0412 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0432\u044b\u044f\u0441\u043d\u0438\u043b\u0438, \u0432 \u0447\u0435\u043c \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043e\u0442 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u0445. \u0422\u0435\u043f\u0435\u0440\u044c \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0439. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u043d\u0430\u0443\u0447\u0438\u043c\u0441\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u044d\u0442\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438. \u0412\u043e\u0437\u044c\u043c\u0435\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e \u043f\u0430\u043f\u043a\u0443 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0435\u0441\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u0430\u043f\u043a\u0430 \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f &#8212; \u0434\u043b\u044f \u0444\u0430\u0439\u043b\u043e\u0432 .css, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0444\u0430\u0439\u043b .html \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u0442\u0435\u0433 &lt;img&gt; [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":480,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-461","post","type-post","status-publish","format-standard","has-post-thumbnail","","category-html"],"_links":{"self":[{"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/posts\/461"}],"collection":[{"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/comments?post=461"}],"version-history":[{"count":1,"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/posts\/461\/revisions"}],"predecessor-version":[{"id":1140,"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/posts\/461\/revisions\/1140"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/media\/480"}],"wp:attachment":[{"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/media?parent=461"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/categories?post=461"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webcademy.ru\/blog\/wp-json\/wp\/v2\/tags?post=461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}