{"id":383895,"date":"2024-06-29T05:10:08","date_gmt":"2024-06-29T05:10:08","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=383895"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=383895","title":{"rendered":"<span>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 SVG-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u043e\u0432<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/e0\/ks\/v-\/e0ksv-v8kqcvsigvfev1-ve3mrg.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/e0\/ks\/v-\/e0ksv-v8kqcvsigvfev1-ve3mrg.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u0412\u0440\u0435\u043c\u044f \u0438\u0434\u0435\u0442, \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f, \u043d\u0430\u0431\u0438\u0442\u044b\u0435 \u0448\u0438\u0448\u043a\u0438 \u043a\u043e\u043f\u044f\u0442\u0441\u044f, \u043d\u0430\u0441\u0442\u0430\u043b\u0430 \u043f\u043e\u0440\u0430 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u043f\u043e SVG-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c. \u0422\u0435\u043c \u0431\u043e\u043b\u0435\u0435, \u0447\u0442\u043e \u0442\u0435\u043c\u0430 \u0434\u043b\u044f \u043c\u043d\u043e\u0433\u0438\u0445 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440\u043e\u0432 \u0432\u0441\u0435 \u0435\u0449\u0435 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0439 \u0438 \u0437\u0430\u043f\u0443\u0442\u0430\u043d\u043d\u043e\u0439. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c SVG-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0442\u043e\u0440\u043e\u043d, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u0435\u043b, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438 \u0441\u043e\u043f\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b. \u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0445\u0430\u043a. \u0421\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043e\u0431\u044a\u0435\u043c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c MDN \u0438 \u0435\u043c\u0443 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0441\u0430\u0439\u0442\u044b. \u0417\u0430\u0434\u0430\u0447\u0430 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u2014 \u0434\u0430\u0442\u044c \u043e\u0431\u0449\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0431\u044b\u0432\u0430\u0435\u0442, \u0438 \u043e\u0442 \u0447\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u0442\u043e\u043b\u043a\u043d\u0443\u0442\u044c\u0441\u044f, \u0435\u0441\u043b\u0438 \u0432\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u044d\u0442\u0443 \u0442\u0435\u043c\u0443, \u0430 \u0443 \u0432\u0430\u0441 \u043f\u043e\u043b\u043d\u0430\u044f \u043a\u0430\u0448\u0430 \u0432 \u0433\u043e\u043b\u043e\u0432\u0435.<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<p>SVG \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0443\u0436\u0435 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0434\u0430\u0432\u043d\u043e. \u041c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e &#171;\u043e\u043d\u043e \u0431\u044b\u043b\u043e \u0432\u0441\u0435\u0433\u0434\u0430&#187;. \u0425\u043e\u0442\u044f \u0435\u0449\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434 \u043c\u0430\u043b\u043e \u043a\u0442\u043e \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b SVG \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432, \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0438.\u0442.\u0434. \u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0432\u0441\u0435 \u043a\u0440\u0443\u0442\u0438\u043b\u043e\u0441\u044c \u0432\u043e\u043a\u0440\u0443\u0433 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u0445 \u0438\u043a\u043e\u043d\u043e\u043a. \u042d\u0442\u043e \u0431\u044b\u043b\u043e \u0432\u0440\u0435\u043c\u044f, \u043a\u043e\u0433\u0434\u0430 \u043b\u044e\u0434\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u0435\u0449\u0435 \u043f\u043b\u043e\u0445\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043b\u0438, \u043a\u0430\u043a \u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043d\u0435\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435, \u0432 JS \u0435\u0449\u0435 \u043d\u0435 \u0431\u044b\u043b\u043e \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043a\u0440\u043e\u0441\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0441\u0442\u0438 \u0441\u0442\u043e\u044f\u043b\u0438 \u043e\u0447\u0435\u043d\u044c \u043e\u0441\u0442\u0440\u043e. \u0422\u043e\u0433\u0434\u0430 \u043d\u0430 CodePen \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0432\u044b\u043b\u043e\u0436\u0438\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u043f\u0440\u0438\u0435\u043c\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0442\u043e\u0433\u043e \u0438\u043b\u0438 \u0438\u043d\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 \u0438 \u043e\u043d \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0441\u0445\u043e\u0434\u0438\u043b\u0441\u044f \u0432 \u043d\u0430\u0440\u043e\u0434\u0435 \u2014 \u0432\u0441\u0435 \u0443\u0447\u0438\u043b\u0438\u0441\u044c \u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a\u0443\u044e \u0436\u0435 \u0444\u0438\u0448\u043a\u0443. \u042d\u0445, \u0432\u043e\u0442 \u0431\u044b\u043b\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0430! \u041d\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u043d\u0430 \u043c\u0435\u0441\u0442\u0435, flash \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0441\u044f, IE \u043f\u0435\u0440\u0435\u043e\u0431\u0443\u043b\u0441\u044f, \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u0440\u0435\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0431\u043e\u043b\u0435\u0435-\u043c\u0435\u043d\u0435\u0435 \u0443\u0441\u0442\u0430\u043a\u0430\u043d\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043d\u043e\u0432\u043e\u043c \u0441\u0442\u0435\u043a\u0435, \u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0441\u043f\u0438\u0441\u043a\u0438 \u0442\u0438\u043f\u043e\u0432\u044b\u0445 \u0448\u0442\u0443\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0440\u043e\u0448\u043e \u0443\u043c\u0435\u0442\u044c \u0434\u0435\u043b\u0430\u0442\u044c. \u0422\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u0442\u0435\u043c \u2014 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e SVG \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a\u0438\u0435 \u0435\u0441\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043a\u0430\u043a\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u0430\u043c\u043e\u0433\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f, \u0438 \u043a\u0430\u043a\u0438\u0435 \u0435\u0441\u0442\u044c \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b.<\/p>\n<p>  <\/p>\n<blockquote><p>\u0421\u0440\u0430\u0437\u0443 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0434\u0438\u0441\u043a\u043b\u0435\u0439\u043c\u0435\u0440. \u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u0442\u0440\u0430\u0433\u0438\u0432\u0430\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b UI\/UX. \u0422\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0432 \u043a\u043e\u0434\u0435. \u0422\u0430\u043a \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b, \u0447\u0442\u043e \u0438\u043c\u0438 \u043f\u043e\u0440\u043e\u0439 \u0437\u043b\u043e\u0443\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u044e\u0442, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0431 \u044d\u0442\u043e\u043c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0442\u0430\u043a\u0430\u044f \u0435\u0441\u0442\u044c, \u043d\u043e \u043a \u0442\u0435\u043c\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043c\u044b \u0435\u0435 \u0437\u0430\u0442\u0440\u043e\u043d\u0435\u043c \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c.<\/p><\/blockquote>\n<p>\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c.<\/p>\n<p>  <\/p>\n<h2 id=\"vektornaya-grafika--instrukcii-po-risovaniyu\">\u0412\u0435\u043a\u0442\u043e\u0440\u043d\u0430\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0430 = \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u043f\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044e<\/h2>\n<p>  <\/p>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c \u0432\u0441\u0435 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u0438 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 \u0441\u0430\u043c\u0438\u043c \u043f\u043e\u043d\u044f\u0442\u0438\u0435\u043c \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0438. \u0421\u043b\u043e\u0436\u043d\u043e \u0441 \u043d\u0438\u043c \u043d\u0435 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u0442\u044c\u0441\u044f \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435. \u041d\u043e \u043a\u0440\u0430\u0442\u043a\u043e \u043d\u0430\u043f\u043e\u043c\u043d\u044e, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0433\u0434\u0435 \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u0443\u044e \u0441\u0435\u0442\u043a\u0443 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438 \u0447\u0438\u0441\u043b\u0430\u043c\u0438 \u0437\u0430\u0434\u0430\u0435\u043c \u0446\u0432\u0435\u0442 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u044f, \u0438 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u043d\u0430 \u043d\u0435\u0439 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043e. \u0413\u0440\u0443\u0431\u043e. \u041d\u0435\u0430\u043a\u0430\u0434\u0435\u043c\u0438\u0447\u043d\u043e. \u041d\u043e \u043d\u0430 \u043f\u0430\u043b\u044c\u0446\u0430\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a \u0432\u0441\u0435 \u044d\u0442\u043e \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 SVG-\u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441, \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043d\u0430 HTML: \u0442\u0435\u0433\u0438, \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u2014 \u0432\u0441\u0435 \u043a\u0430\u043a \u0432\u0441\u0435\u0433\u0434\u0430. \u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e XML-\u043e\u0441\u043d\u043e\u0432\u0430 \u0443 \u043d\u0438\u0445 \u043e\u0434\u043d\u0430 \u0438 \u0442\u0430 \u0436\u0435. \u041a\u0430\u043a \u043c\u044b \u043f\u043e\u0442\u043e\u043c \u0443\u0432\u0438\u0434\u0438\u043c \u2014 \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043e\u0434\u043d\u043e \u0432 \u0434\u0440\u0443\u0433\u043e\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u043e\u0442 \u0442\u0430\u043a \u043c\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435 \u0435\u0441\u0442\u044c \u0447\u0435\u0442\u044b\u0440\u0435 \u043a\u0440\u0443\u0433\u0430 \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u043c\u0438, \u0440\u0430\u0434\u0438\u0443\u0441\u043e\u043c \u0438 \u0446\u0432\u0435\u0442\u043e\u043c:<\/p>\n<p>  <\/p>\n<pre><code class=\"xml\">&lt;svg viewBox='0 0 100 100'>     &lt;circle cx='25' cy='50' r='5' fill='#14ff6e' stroke='#14ff6e' \/>     &lt;circle cx='75' cy='50' r='5' fill='#14ff6e' stroke='#14ff6e' \/>     &lt;circle cx='50' cy='25' r='5' fill='#14ff6e' stroke='#14ff6e' \/>     &lt;circle cx='50' cy='75' r='5' fill='#14ff6e' stroke='#14ff6e' \/> &lt;\/svg><\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u0446\u0435\u043b\u043e\u043c \u043f\u043e \u0441\u0442\u0435\u043f\u0435\u043d\u0438 \u0447\u0438\u0442\u0430\u0435\u043c\u043e\u0441\u0442\u0438 \u043e\u0447\u0438\u0449\u0435\u043d\u043d\u044b\u0439 \u043e\u0442 \u043c\u0443\u0441\u043e\u0440\u0430 SVG \u043a\u043e\u0434 \u0441\u0440\u0430\u0432\u043d\u0438\u043c \u0441 HTML. \u0422\u0443\u0442 \u043c\u043e\u0436\u043d\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u0433\u0440\u0443\u043f\u043f\u044b, \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u044b\u0435 id, \u043a\u043b\u0430\u0441\u0441\u044b &#171;\u043a\u0430\u043a \u0432 \u0411\u042d\u041c&#187;, \u0438.\u0442.\u0434.<\/p>\n<p>  <\/p>\n<p>\u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u0430\u043c\u0438 \u0442\u0435\u0433\u043e\u0432 \u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u043d\u0430 MDN. \u0422\u0430\u043c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e \u0432\u0441\u0435\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0441\u0442\u0430\u0442\u044c\u0438 \u2014 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\" rel=\"nofollow noopener noreferrer\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG<\/a>. \u041c\u044b \u0436\u0435 \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u043c\u0441\u044f \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u0430, \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0430 \u043a\u0430\u043a \u044d\u0442\u043e\u0442 \u0442\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c.<\/p>\n<p>  <\/p>\n<h2 id=\"integriruem-svg-v-stranicu\">\u0418\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u043c SVG \u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443<\/h2>\n<p>  <\/p>\n<p>\u041d\u043e \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0443\u0436\u043d\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c SVG \u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u041c\u044b \u043d\u0435 \u0432 \u0432\u0430\u043a\u0443\u0443\u043c\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c. \u0418 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c. \u041f\u0435\u0440\u0432\u043e\u0435 \u2014 \u043a\u043e\u0434 SVG \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u044f\u043c\u043e \u0432 HTML.<\/p>\n<p>  <\/p>\n<pre><code class=\"xml\">&lt;div class='my-svg-component'>     &lt;svg>         &lt;!-- \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 svg -->     &lt;\/svg> &lt;\/div><\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043f\u0440\u043e\u0441\u0438\u0442\u044c: \u0430 \u044d\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS \u0438 JS \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 SVG-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0442\u0430\u043a \u0436\u0435, \u043a\u0430\u043a \u0438 \u0441 \u043b\u044e\u0431\u044b\u043c\u0438 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435? \u2014 \u0414\u0430. \u0418\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a. \u041f\u0440\u0430\u0432\u0434\u0430 \u0441 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043e\u0433\u043e\u0432\u043e\u0440\u043a\u0430\u043c\u0438. \u0418\u043d\u043e\u0433\u0434\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 SVG \u0447\u0442\u043e-\u0442\u043e \u0432\u0441\u0435 \u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0435 \u0442\u0430\u043a, \u043a\u0430\u043a \u043d\u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u041a \u044d\u0442\u043e\u043c\u0443 \u0435\u0449\u0435 \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f. \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0443\u0434\u043e\u0431\u0435\u043d \u043f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u0442\u0435\u043c, \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u0441\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c: \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043b\u0435\u0433\u043a\u043e \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438 \u043b\u044e\u0431\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 SVG, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u0442\u0430 \u0436\u0435 \u0441\u0430\u043c\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430.<\/p>\n<p>  <\/p>\n<p>\u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u0435\u0441\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u043b\u044e\u0431\u044b\u0445 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u043a\u043e\u0434 SVG \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0432 \u043d\u0443\u0436\u043d\u044b\u0435 \u043c\u0435\u0441\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043f\u0440\u0438 \u0438\u0445 \u0441\u0431\u043e\u0440\u043a\u0435, \u0442\u0430\u043a \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438 \u043a\u0430\u043a \u0441 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438, \u0430 \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u0438\u043c\u0435\u0442\u044c \u0432\u0441\u0435 \u0432 \u043e\u0434\u043d\u043e\u043c. \u041e\u043d\u0438 \u0433\u0443\u0433\u043b\u044f\u0442\u0441\u044f \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u0432\u043a\u0443\u0441 \u0438 \u0446\u0432\u0435\u0442 \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443 &#171;\u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430 + inline svg&#187;. \u0410 \u043c\u043d\u043e\u0433\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u044b \u0438 \u0441\u0430\u043c\u0438 \u0432\u0441\u0435 \u0443\u043c\u0435\u044e\u0442, \u043d\u0438\u0447\u0435\u0433\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e. <\/p>\n<p>  <\/p>\n<blockquote><p>\u0412\u0430\u0436\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442: \u043f\u0440\u0438 \u0432\u0441\u0442\u0430\u0432\u043a\u0435 SVG-\u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043e\u043d\u0438 \u0432\u0441\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u044e\u0442 \u0432 \u043e\u0434\u043d\u0443 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u0415\u0441\u043b\u0438 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c id \u0432 \u043d\u0438\u0445, \u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0448\u0430\u043d\u0441, \u0447\u0442\u043e \u043e\u043d\u0438 \u043f\u0440\u043e\u0434\u0443\u0431\u043b\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438 \u043d\u0430\u0447\u043d\u0435\u0442\u0441\u044f \u043c\u0430\u0433\u0438\u044f. \u0417\u0430 \u044d\u0442\u0438\u043c \u0441\u0442\u043e\u0438\u0442 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u043a \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b \u043a id. \u0418\u043b\u0438 \u043f\u0440\u0438\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0441 shadow DOM, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0422\u0443\u0442 \u0443\u0436\u0435 \u0432\u0441\u0435 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0432 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435.<\/p><\/blockquote>\n<p>\u0412\u0442\u043e\u0440\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c SVG \u043a\u0430\u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430<\/p>\n<p>  <\/p>\n<pre><code class=\"xml\">&lt;img src='my-vector-image.svg' \/><\/code><\/pre>\n<p>  <\/p>\n<p>\u0410 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438 \u043d\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430. \u041c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c SVG \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u0433\u043e\u0432 object \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 iframe. \u041e\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438 \u0444\u043e\u043d\u043e\u043c \u0432 CSS. \u041d\u043e \u0432\u043e \u0432\u0441\u0435\u0445 \u044d\u0442\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0440\u0435\u0447\u044c \u0431\u0443\u0434\u0435\u0442 \u0438\u0434\u0442\u0438 \u043f\u0440\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0439 \u0444\u0430\u0439\u043b. \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043e\u0442 \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0418 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043d\u0435\u043c\u0443 \u0431\u0443\u0434\u0435\u0442 \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0443\u0440\u0435\u0437\u0430\u043d\u043d\u044b\u043c.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043d\u0430\u0448\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435, \u043a\u0430\u043a \u0432\u044b \u0443\u0436\u0435, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043b\u0438, \u0441\u043b\u043e\u0436\u043d\u043e \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0449\u0435\u0435 \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u043c \u0444\u0430\u0439\u043b\u0435 \u0441 \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u041d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0430\u043a \u0432 \u043d\u0435\u0433\u043e \u0437\u0430\u043b\u0435\u0437\u0442\u044c \u0438\u0437 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0438\u043b\u0438 \u0438\u0437 CSS \u0438 \u0447\u0442\u043e-\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c. \u0412\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0443\u0442 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f. \u041f\u043b\u044e\u0441 \u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0435\u0441\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043f\u043e \u0447\u0430\u0441\u0442\u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0438 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0445 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 SVG \u0444\u0430\u0439\u043b\u0430\u0445. \u0418, \u043a\u0430\u043a \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c, \u0438\u043d\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u043f\u043e \u0441\u0435\u0442\u0438, \u0447\u0442\u043e\u0431\u044b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0432 \u043d\u0435\u0439 \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0430\u0441\u044c. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u0432\u043e \u043c\u043d\u043e\u0433\u0438\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445. \u041c\u044b \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434.<\/p>\n<p>  <\/p>\n<blockquote><p>\u0421\u0442\u043e\u0438\u0442 \u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 SPA \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u043c\u0435\u0448\u0430\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u0435 SVG \u0441\u043a\u0440\u0438\u043f\u0442\u0430\u043c\u0438 \u0438 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0445 \u043a\u043e\u0434 \u0432 HTML \u043f\u043e \u043c\u0435\u0440\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u0422\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043b\u0443\u0447\u0448\u0435\u0435 \u0438\u0437 \u043e\u0431\u043e\u0438\u0445 \u043c\u0438\u0440\u043e\u0432 \u2014 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 HTML \u0438 \u043f\u043e\u043b\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u043a\u043e \u0432\u0441\u0435\u043c\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 SVG \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0441\u0447\u0435\u0442\u0435.<\/p><\/blockquote>\n<p>  <\/p>\n<h2 id=\"css--smil--js\">CSS + SMIL + JS<\/h2>\n<p>  <\/p>\n<p>\u0412\u0441\u044f \u0441\u0443\u0442\u044c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f SVG \u0441\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a \u043f\u043b\u0430\u0432\u043d\u044b\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0443 \u0442\u0435\u0433\u043e\u0432. \u0412\u0440\u0435\u043c\u044f \u0438\u0434\u0435\u0442 \u2014 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f. \u0412\u043e\u0442 \u0438 \u0432\u0441\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f. \u0412\u0441\u0435\u043c \u0441\u043f\u0430\u0441\u0438\u0431\u043e, \u0443\u0432\u0438\u0434\u0438\u043c\u0441\u044f \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0430\u0437.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0438 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u044c, \u043d\u043e \u043c\u044b \u0440\u0430\u0441\u043a\u0440\u043e\u0435\u043c \u0442\u0435\u043c\u0443 \u043d\u0435\u043d\u043e\u0433\u043e \u0448\u0438\u0440\u0435, \u0442.\u043a. \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e \u0435\u0441\u0442\u044c \u043b\u044e\u0434\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u043e. \u0412 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u0435\u0441\u0442\u044c \u0442\u0440\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0430\u044e\u0442 \u043d\u0430\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c SVG: CSS, JS \u0438 SMIL. \u0423 \u043a\u0430\u0436\u0434\u043e\u0439 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u0447\u0442\u043e \u043c\u044b \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043c\u0441\u044f \u0441\u043e \u0432\u0441\u0435\u043c\u0438.<\/p>\n<p>  <\/p>\n<h3 id=\"animirovanie-svg-s-pomoschyu-css\">\u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 SVG \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS<\/h3>\n<p>  <\/p>\n<p>CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u2014 \u044d\u0442\u043e \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442. \u0412\u0441\u0435 \u043c\u044b \u0441 \u043d\u0438\u043c\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0432 &#171;\u043e\u0431\u044b\u0447\u043d\u043e\u0439&#187; \u0432\u0435\u0440\u0441\u0442\u043a\u0435. \u041e\u043d\u0438 \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0439 \u0438\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0446\u0432\u0435\u0442\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 :hover\/:focus. \u0418\u043b\u0438 \u043f\u043e \u043d\u0430\u0432\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u044e \u043a\u043b\u0430\u0441\u0441\u043e\u0432-\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439. \u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 SVG \u043e\u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u0438\u043a\u043e\u043d\u043e\u043a \u0438\u043b\u0438 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0434\u0435\u0442\u0430\u043b\u0435\u0439 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. \u0422\u0430\u043c \u043a\u0430\u043a \u0440\u0430\u0437 \u0447\u0442\u043e-\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043d\u0435\u0437\u0430\u043c\u044b\u0441\u043b\u043e\u0432\u0430\u0442\u043e\u0435 \u043e\u0431\u044b\u0447\u043d\u043e \u0438 \u043d\u0443\u0436\u043d\u043e. \u041f\u0440\u043e\u0441\u0442\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u2014 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442.<\/p>\n<p>  <\/p>\n<p>\u0412 CSS \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u2014 transition \u0438 keyframes. \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0437\u043d\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 transition \u0438 keyframes, \u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u043f\u0440\u0438\u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442\u044c, \u0441\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0430 MDN \u0438 \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0440\u043e \u043d\u0438\u0445 \u2014 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Transitions\/Using_CSS_transitions\" rel=\"nofollow noopener noreferrer\">\u0440\u0430\u0437<\/a> \u0438 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@keyframes\" rel=\"nofollow noopener noreferrer\">\u0434\u0432\u0430<\/a>.<\/p>\n<p>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/628a1bc358b073b4525f78c4\" data-style=\"\" id=\"628a1bc358b073b4525f78c4\" width=\"\"><\/div>\n<\/div>\n<p>  <\/p>\n<p>\u0412 \u0446\u0435\u043b\u043e\u043c \u043b\u043e\u0433\u0438\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u044b CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 SVG \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0438\u0430\u043b\u044c\u043d\u043e \u043d\u0435 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 HTML, \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0435 \u0434\u043b\u044f SVG \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<blockquote><p>\u041a\u0430\u043a \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 HTML, \u0432 SVG \u043d\u0435 \u0432\u0441\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u043c\u044b\u043c\u0438 \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b CSS, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b\u0435 \u0432\u044b\u0448\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f SVG \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0432\u0437\u0430\u0438\u043c\u043e\u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u043c\u0438 \u0434\u0430\u0436\u0435 \u0432 \u0443\u0441\u043b\u043e\u0432\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0437\u0430\u0434\u0430\u0447\u0430\u0445. \u0425\u043e\u0442\u044f \u0435\u0441\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u0434\u043b\u044f CSS \u043b\u043e\u0433\u0438\u043a\u0438 &#171;\u043c\u0435\u043d\u044f\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e transform \u0438 opacity&#187;, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u044d\u0442\u043e\u0433\u043e \u0438 \u043d\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c.<\/p><\/blockquote>\n<p>\u041d\u043e \u0435\u0441\u0442\u044c \u043d\u044e\u0430\u043d\u0441. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0432 \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u044f\u0445 \u0438 \u0447\u0435\u0440\u043d\u043e\u0432\u0438\u043a\u0430\u0445 W3C \u043f\u043e \u043f\u043e\u0432\u043e\u0434\u0443 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f CSS \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0438 SVG \u0431\u044b\u043b\u043e \u043c\u043d\u043e\u0433\u043e \u0441\u0430\u043c\u044b\u0445 \u0440\u0430\u0437\u043d\u044b\u0445 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432, \u043d\u043e \u044d\u0442\u043e\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432\u0430\u0436\u0435\u043d \u0432 \u043d\u0430\u0448\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435. \u0412 \u043c\u0438\u0440\u0435 CSS \u0438 \u0432 \u043c\u0438\u0440\u0435 SVG \u0435\u0441\u0442\u044c \u0448\u0442\u0443\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e \u0441\u0443\u0442\u0438 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u044e\u0442 \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430, \u043d\u043e \u0432 \u0434\u0435\u0442\u0430\u043b\u044f\u0445 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f. \u0418 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043f\u044b\u0442\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u043a\u0430\u043a-\u0442\u043e \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 \u0441\u043e\u0441\u0442\u044b\u043a\u043e\u0432\u0430\u0442\u044c. \u041f\u0440\u0438\u0447\u0435\u043c \u043d\u0430 \u0434\u0435\u043b\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u043f\u043e-\u0441\u0432\u043e\u0435\u043c\u0443, \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441\u043e \u0441\u0432\u043e\u0438\u043c\u0438 \u0442\u0430\u0440\u0430\u043a\u0430\u043d\u0430\u043c\u0438 \u0432 \u0433\u043e\u043b\u043e\u0432\u0435. \u0427\u0442\u043e\u0431\u044b \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043d\u0435\u0441\u0442\u044b\u043a\u043e\u0432\u043e\u043a, \u0445\u043e\u0440\u043e\u0448\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 xmlns:<\/p>\n<p>  <\/p>\n<pre><code class=\"xml\">&lt;svg version=\"1.0\" xmlns='http:\/\/www.w3.org\/2000\/svg'>...&lt;\/svg><\/code><\/pre>\n<p>  <\/p>\n<p>\u0424\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0443 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0438 \u0431\u0435\u0437 \u043d\u0435\u0433\u043e, \u043d\u043e \u043f\u043e \u0444\u0430\u043a\u0442\u0443 \u2014 \u043f\u043e\u0440\u043e\u0439 \u0442\u0430\u043a\u0430\u044f \u043c\u0435\u043b\u043e\u0447\u044c \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443, \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0441\u043e\u0431\u043e \u0443\u043c\u043d\u044b\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432. \u041d\u043e \u044d\u0442\u043e \u043d\u0435 \u0441\u0435\u0440\u0435\u0431\u0440\u044f\u043d\u0430\u044f \u043f\u0443\u043b\u044f. \u0423 \u043d\u0430\u0441 \u043d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c \u043d\u0435\u0442 100% \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u0441\u0435\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c, \u0447\u0442\u043e \u0432\u043e\u0442 \u044d\u0442\u043e\u0442 \u043a\u043e\u0434 \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u043c\u0438\u0440\u0430 CSS, \u0430 \u0432\u043e\u0442 \u0442\u043e\u0442 \u043a\u043e\u0434 \u2014 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 \u043c\u0438\u0440\u0430 SVG.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043d\u0430\u0447\u0430\u043b\u0443 \u043b\u043e\u043c\u0430\u044e\u0442 \u043c\u043e\u0437\u0433 \u043d\u043e\u0432\u044b\u0435 \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f. \u0422\u043e\u0447\u043d\u0435\u0435 \u0431\u0435\u0437\u0440\u0430\u0437\u043c\u0435\u0440\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0432 SVG, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u043c \u0435\u0434\u0438\u043d\u0438\u0446\u0430\u043c \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0432 CSS. \u041d\u043e \u043a \u044d\u0442\u043e\u043c\u0443 \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u0438\u0432\u044b\u043a\u0430\u0435\u0448\u044c. \u042d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u043a\u043e\u0439 \u0434\u0432\u043e\u0439\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0443\u0442\u0430\u0435\u0442 \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u0432 \u0432 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u2014 \u044d\u0442\u043e \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438. \u0414\u0430 \u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u0432 \u043e\u043d \u043f\u0443\u0442\u0430\u0435\u0442. \u0421\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u0432 \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0434\u0435\u0442\u0430\u043b\u044f\u043c\u0438, \u0445\u043e\u0442\u044f \u0443\u0436\u0435 \u043b\u0435\u0442 \u0434\u0435\u0441\u044f\u0442\u044c \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u044e\u0442, \u0435\u0441\u043b\u0438 \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435. \u0412 CSS \u0435\u0441\u0442\u044c transform, \u0438 \u0432 SVG \u0435\u0441\u0442\u044c transform. \u0418 \u0442\u0430\u043c, \u0438 \u0442\u0430\u043c, \u0435\u0441\u0442\u044c \u043d\u0430\u0431\u043e\u0440 \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439 \u2014 translate, rotate, scale \u0438 skew. \u0418 \u0438\u043d\u0442\u0443\u0438\u0442\u0438\u0432\u043d\u043e \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432\u0441\u0435 \u0442\u0430\u043c \u0434\u043e\u043b\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e, \u043d\u0435 \u0442\u0430\u043a \u043b\u0438?<\/p>\n<p>  <\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0432\u043e\u043f\u0440\u043e\u0441\u0430. \u041f\u0435\u0440\u0432\u044b\u0439 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e transform-origin \u0432 \u043c\u0438\u0440\u0435 SVG \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u0430\u0445 [0,0] \u0432\u0441\u0435\u0439 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u043d\u043e\u0439 \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438. \u041d\u0435 \u0441\u0430\u043c\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0432\u0441\u0435\u0439 \u043f\u043b\u043e\u0441\u043a\u043e\u0441\u0442\u0438. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430 \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 SVG \u0441\u0446\u0435\u043d\u0435 \u0432\u043e\u043a\u0440\u0443\u0433 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043a\u0438, \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u0435 \u0441\u0434\u0432\u0438\u043d\u0443\u0442\u044c \u0432 \u0446\u0435\u043d\u0442\u0440 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442, \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u0432 \u0442\u043e\u0447\u043a\u0443 \u0441 \u043d\u0438\u043c, \u043f\u043e\u0432\u0435\u0440\u043d\u0443\u0442\u044c, \u0438 \u043f\u043e\u0442\u043e\u043c \u0441\u0434\u0432\u0438\u043d\u0443\u0442\u044c \u043e\u0431\u0440\u0430\u0442\u043d\u043e. \u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043a\u0430\u0441\u0430\u043b\u0438\u0441\u044c \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0438, \u0442\u043e, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0432\u0438\u0434\u0435\u043b\u0438 \u043d\u0435\u0447\u043d\u043e \u043f\u043e\u0445\u043e\u0436\u0435\u0435, \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u0430 \u0432\u043e\u0442 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u043e\u0432 \u044d\u0442\u0430 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u043c-\u0442\u043e \u043d\u043e\u0432\u044b\u043c \u0438 \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c. \u0412 CSS \u0432\u0441\u0435 \u044d\u0442\u043e \u0441\u043a\u0440\u044b\u0442\u043e \u043e\u0442 \u043d\u0430\u0448\u0438\u0445 \u0433\u043b\u0430\u0437:<\/p>\n<p>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/628a1deecfffb2b489681b8e\" data-style=\"\" id=\"628a1deecfffb2b489681b8e\" width=\"\"><\/div>\n<\/div>\n<p>  <\/p>\n<p>\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c transform-origin \u0438\u0437 \u043c\u0438\u0440\u0430 CSS, \u0441\u0447\u0438\u0442\u0430\u044f \u0435\u0433\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u044b\u043c, \u0438 \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043f\u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432\u0441\u0435 \u043e\u043a. \u041d\u043e \u0434\u0440\u0443\u0433\u0438\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u044d\u0442\u043e\u0433\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0443\u0442, \u0438 \u0442\u0430\u043c \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u043e\u043a.<\/p>\n<p>  <\/p>\n<p>\u0418 \u0435\u0449\u0435 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043d\u0430 SVG-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445 \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0441\u0442\u0435\u043a. \u041c\u043e\u0436\u043d\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438. \u041f\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044c, \u043f\u043e\u0432\u0435\u0440\u043d\u0443\u0442\u044c, \u0435\u0449\u0435 \u043f\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044c, \u0435\u0449\u0435 \u043f\u043e\u0432\u0435\u0440\u043d\u0443\u0442\u044c, \u0438.\u0442.\u0434. \u0410 \u043f\u043e\u0442\u043e\u043c \u043e\u043d\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435. \u0410 CSS \u0442\u0430\u043a \u043d\u0435 \u0443\u043c\u0435\u0435\u0442. \u0422\u0430\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u043e\u0434\u043d\u043e\u0439 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u0442\u0438\u043f\u0430 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443. \u0418\u043d\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u043c\u0443 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0442\u0430\u043a \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0441 \u044d\u0442\u043e\u0439 \u043d\u0435\u0441\u0442\u044b\u043a\u043e\u0432\u043a\u043e\u0439 \u0438 \u043d\u0435 \u043d\u0430\u0433\u0440\u043e\u043c\u043e\u0436\u0434\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439 \u043d\u0430 \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442.<\/p>\n<p>  <\/p>\n<blockquote><p>\u0412 \u0446\u0435\u043b\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u043c\u043e\u0440\u0430\u043b\u044c: \u0435\u0441\u043b\u0438 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0448\u0442\u0443\u043a\u0438 \u0432 \u043c\u0438\u0440\u0435 CSS \u0438 \u0432 \u043c\u0438\u0440\u0435 SVG \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e, \u0438 \u0432 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0447\u0435\u0440\u043d\u043e\u0432\u0438\u043a\u0430\u0445 W3C \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e, \u0447\u0442\u043e \u043e\u043d\u0438 \u043f\u043e \u0438\u0434\u0435\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u2014 \u044d\u0442\u043e \u0435\u0449\u0435 \u043d\u0435 \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043e\u043d\u0438 \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e. \u0422\u0443\u0442 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u044b\u043c \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0432\u0441\u0435 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 Chrome.<\/p><\/blockquote>\n<p>\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438 CSS \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441 SVG. \u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043b\u0430\u0434\u0438\u0442\u044c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f, \u0437\u0430\u043c\u0435\u0434\u043b\u0438\u0442\u044c, \u043f\u043e\u043a\u0440\u0443\u0442\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u0442\u0443\u0434\u0430-\u0441\u044e\u0434\u0430 \u2014 \u0432\u0441\u0435 \u0435\u0441\u0442\u044c:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/8u\/m4\/nm\/8um4nmiqhhethjhivwr07s8--ui.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/8u\/m4\/nm\/8um4nmiqhhethjhivwr07s8--ui.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u0432\u043e\u0442 \u0435\u0441\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0442\u043e \u043f\u043e\u043b\u044c\u0437\u044b \u043e\u0442 \u044d\u0442\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0438\u043a\u0430\u043a\u043e\u0439. \u041e\u043d\u0438 \u043d\u0435 \u043c\u043e\u0433\u0443\u0442 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0433\u0434\u0435 \u0438\u043c\u0435\u043d\u043d\u043e \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0448\u043b\u043e \u043d\u0435 \u0442\u0430\u043a, \u0435\u0441\u043b\u0438 \u0432 \u043a\u043e\u0434\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0435\u0441\u0442\u044c, \u0430 \u043f\u043e \u0444\u0430\u043a\u0442\u0443 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0438\u0437-\u0437\u0430 \u0442\u0430\u043a\u0438\u0445 \u0432\u043e\u0442 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0440\u0435\u0447\u0438\u0439 \u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u043c\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438, \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0435 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0442\u043e\u043f\u043e\u0440\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448 \u043a\u043e\u0434 \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0432\u0435\u0437\u0434\u0435, \u0430 \u0435\u0433\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043d\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u043e \u043a\u0443\u0447\u0443 \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u041d\u043e \u044d\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u0432\u0435\u0449\u0435\u0439 \u0438\u0437 \u043c\u0438\u0440\u0430 CSS \u0438 \u043c\u0438\u0440\u0430 SVG \u0438 \u0441\u043e\u043f\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0438\u043c \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432. \u0421 \u0432\u0435\u0449\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u044e\u0442\u0441\u044f, \u0432\u0441\u0435 \u0432 \u0446\u0435\u043b\u043e\u043c \u0445\u043e\u0440\u043e\u0448\u043e.<\/p>\n<p>  <\/p>\n<h2 id=\"animirovanie-svg-s-pomoschyu-smil\">\u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 SVG \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e SMIL<\/h2>\n<p>  <\/p>\n<p>\u041d\u043e \u0431\u0443\u0434\u0435\u043c \u0434\u0432\u0438\u0433\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043e\u0431\u0449\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u0443. \u041d\u0430 \u043e\u0447\u0435\u0440\u0435\u0434\u0438 SMIL. \u042d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0434\u0440\u0435\u0432\u043d\u044f\u044f, \u0437\u0430\u043d\u044f\u0442\u043d\u0430\u044f, \u043d\u043e \u0432 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f \u043e\u0447\u0435\u043d\u044c \u0441\u043f\u043e\u0440\u043d\u0430\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u043b\u0430\u0441\u044c \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0441\u0430\u043c\u0438\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u043c SVG \u0433\u0434\u0435-\u0442\u043e \u0442\u0430\u043c \u0432 \u0432\u0430\u043a\u0443\u0443\u043c\u0435, \u0447\u0435\u043c \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432. \u0415\u0441\u043b\u0438 \u0432 \u0434\u0432\u0443\u0445 \u0441\u043b\u043e\u0432\u0430\u0445, \u0442\u043e \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u043d\u0430\u0431\u043e\u0440 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u0433\u043e\u0432 \u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u041f\u0440\u044f\u043c\u043e \u043a\u0430\u043a \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0435\u0440\u0435\u0432\u0430 \u0442\u0435\u0433\u043e\u0432 \u2014 \u0442\u0430\u043a\u0438\u043c \u0436\u0435 \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0435\u043c.<\/p>\n<p>  <\/p>\n<blockquote><p>SMIL \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u043e\u0442 SVG \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u0442\u0430\u043a \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435\u0441\u044c W3C-\u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440\u043e\u043c, \u0442\u043e \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0439\u0442\u0435 \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c, \u043d\u0430 \u043a\u0430\u043a\u0438\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u044b \u0438\u0437 \u0441\u043f\u0438\u0441\u043a\u0430 document type \u0435\u043c\u0443 \u043d\u0443\u0436\u043d\u043e \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f. \u0415\u0441\u043b\u0438 \u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u043b\u043e\u0436\u043d\u044b\u0445 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0430\u0445 \u0438\u0437-\u0437\u0430 &#171;\u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445&#187; \u0442\u0435\u0433\u043e\u0432 \u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432.<\/p><\/blockquote>\n<p>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0442\u0435\u0433\u043e\u0432 \u0437\u0434\u0435\u0441\u044c \u0442\u0440\u0438:<\/p>\n<p>  <\/p>\n<ol>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Element\/animate\" rel=\"nofollow noopener noreferrer\">animate<\/a> \u2014 \u0434\u043b\u044f \u043f\u043b\u0430\u0432\u043d\u044b\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432.<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Element\/animateTransform\" rel=\"nofollow noopener noreferrer\">animateTransform<\/a> \u2014 \u043f\u043e \u0441\u0443\u0442\u0438 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439.<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Element\/animateMotion\" rel=\"nofollow noopener noreferrer\">animateMotion<\/a> \u2014 \u0434\u043b\u044f \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043f\u043e \u043a\u0440\u0438\u0432\u044b\u043c.<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u0415\u0449\u0435 \u0435\u0441\u0442\u044c \u0442\u0435\u0433 set, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0437\u043a\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0435. \u042d\u0442\u043e \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u043f\u0440\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043d\u043e \u0442\u0430\u043a\u043e\u0435 \u0442\u043e\u0436\u0435 \u0435\u0441\u0442\u044c.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043b\u0438\u0447\u0438\u0435 \u0432 \u043a\u0430\u043a\u043e\u043c-\u0442\u043e \u0441\u043c\u044b\u0441\u043b\u0435 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u044e\u0449\u0438\u0445 \u0434\u0440\u0443\u0433 \u0434\u0440\u0443\u0433\u0430 \u0442\u0435\u0433\u043e\u0432 animate \u0438 animateTransform, \u0430 \u0435\u0449\u0435 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0435\u0433\u043e animateColor, \u0441\u0430\u043c\u043e \u043f\u043e \u0441\u0435\u0431\u0435 \u043d\u0430\u043c\u0435\u043a\u0430\u0435\u0442 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u043f\u0440\u043e\u0448\u043b\u0430 \u0434\u043e\u043b\u0433\u0438\u0439 \u0438 \u0442\u0435\u0440\u043d\u0438\u0441\u0442\u044b\u0439 \u043f\u0443\u0442\u044c \u0432 \u0441\u0432\u043e\u0435\u043c \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0438, \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0442\u043e \u043d\u0430\u0441\u043b\u0435\u0434\u0438\u0435 \u0438\u0437 \u0432\u0440\u0435\u043c\u0435\u043d, \u043a\u043e\u0433\u0434\u0430 flash \u0431\u044b\u043b \u0436\u0438\u0432. \u041d\u043e \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u044d\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c SMIL \u0432 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0437\u0430\u0434\u0430\u0447\u0430\u0445 \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u0438 \u0441\u043b\u043e\u0436\u043d\u043e, \u0440\u0430\u0437\u0432\u0435 \u0447\u0442\u043e \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442\u044b \u043e\u0431\u044b\u0447\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u043e:<\/p>\n<p>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/628a1defb73444b4a1d3fddf\" data-style=\"\" id=\"628a1defb73444b4a1d3fddf\" width=\"\"><\/div>\n<\/div>\n<p>  <\/p>\n<p>\u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0437\u0434\u0435\u0441\u044c \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0443 \u044d\u0442\u0438\u0445 \u0442\u0435\u0433\u043e\u0432, \u0435\u0441\u043b\u0438 \u043a\u043e\u043c\u0443-\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0442\u043e \u0435\u0441\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0435\u0435 \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 SMIL \u043d\u0430 CSS-tricks: <a href=\"https:\/\/css-tricks.com\/guide-svg-animations-smil\/\" rel=\"nofollow noopener noreferrer\">https:\/\/css-tricks.com\/guide-svg-animations-smil\/<\/a>. <\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043e\u0431\u043e\u0431\u0449\u0438\u0442\u044c, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0412\u0441\u0435 \u0442\u043e \u0436\u0435, \u0447\u0442\u043e \u0438 \u0432 CSS.<\/li>\n<li>\u041c\u043e\u0440\u0444\u0438\u043d\u0433 \u2014 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0444\u043e\u0440\u043c\u044b \u043a\u0440\u0438\u0432\u044b\u0445.<\/li>\n<li>\u0414\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u043f\u043e \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u043c \u0442\u0440\u0430\u0435\u043a\u0442\u043e\u0440\u0438\u044f\u043c, \u043a\u0430\u043a \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435.<\/li>\n<li>\u041f\u043b\u044e\u0441 \u0435\u0441\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430\u0447\u0430\u043b\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. \u041c\u043e\u0436\u043d\u043e \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u0434\u043d\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0437\u0430\u0434\u0430\u0442\u044c \u0432 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430\u0447\u0430\u043b\u0430 \u0438\u043b\u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0434\u0440\u0443\u0433\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u042d\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u0432 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u0432 \u0441\u0446\u0435\u043d\u0435 \u043c\u043d\u043e\u0433\u043e \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0439 \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043b\u043e\u0433\u0438\u043a\u043e\u0439.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0415\u0449\u0435 \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u0432\u0440\u043e\u0434\u0435 \u043a\u043b\u0438\u043a\u0430 \u043c\u044b\u0448\u043a\u043e\u0439. \u041f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 CSS \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0431\u043e\u043b\u044c\u0448\u0435, \u043d\u043e \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JS, \u043d\u0430\u0431\u043e\u0440 \u0441\u0438\u043b\u044c\u043d\u043e \u0443\u0440\u0435\u0437\u0430\u043d\u043d\u044b\u0439 \u0438 \u043d\u0435 \u043e\u0441\u043e\u0431\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u044b\u0439, \u0435\u0441\u043b\u0438 \u0443\u0436 \u0432\u0441\u0435 \u043f\u043e-\u0447\u0435\u0441\u0442\u043d\u043e\u043c\u0443 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c. \u041d\u043e \u0435\u0441\u0442\u044c, \u0438 \u0445\u043e\u0440\u043e\u0448\u043e.<\/p>\n<p>  <\/p>\n<p>\u0418\u0434\u0435\u044f \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e\u0433\u043e \u0441\u0430\u043c\u0430 \u043f\u043e \u0441\u0435\u0431\u0435 \u0431\u044b\u043b\u0430 \u043d\u0435\u043f\u043b\u043e\u0445\u0430\u044f. \u041d\u043e \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0448\u043b\u043e \u043d\u0435 \u0442\u0430\u043a. \u042f \u043d\u0435 \u0437\u043d\u0430\u044e \u0432\u0441\u0435\u0445 \u0434\u0435\u0442\u0430\u043b\u0435\u0439, \u0434\u0443\u043c\u0430\u044e \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u0437\u043d\u0430\u0435\u0442, \u043d\u043e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u0434\u043e\u043b\u0433\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u043b\u0430\u0441\u044c \u0432 \u043a\u0430\u043a\u043e\u043c-\u0442\u043e \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e-\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0442\u0430\u0442\u0443\u0441\u0435 \u0438 \u0441\u0434\u043e\u0445\u043b\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434. \u0422\u043e\u0433\u0434\u0430 \u0435\u0435 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u043b IE, \u0432 Firefox \u0438 Safari \u0431\u044b\u043b\u0430 \u043a\u0443\u0447\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0432 Chrome \u0432\u0440\u043e\u0434\u0435 \u0447\u0442\u043e-\u0442\u043e \u0431\u044b\u043b\u043e, \u043d\u043e \u0441\u0442\u0430\u043b\u043e deprecated. \u041f\u043e\u044f\u0432\u0438\u043b\u0438\u0441\u044c \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u043d\u0430 \u0442\u0435\u043c\u0443 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u0441\u043e SMIL \u043d\u0430 CSS \u0438\u043b\u0438 JS. \u041c\u043d\u043e\u0433\u0438\u0435 \u043f\u0440\u043e\u0440\u043e\u0447\u0438\u043b\u0438, \u0447\u0442\u043e SMIL \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u043f\u043e \u043f\u0443\u0442\u0438 flash \u043d\u0430 \u0441\u0432\u0430\u043b\u043a\u0443 \u0438\u0441\u0442\u043e\u0440\u0438\u0438. \u0410 \u043f\u043e\u0442\u043e\u043c \u0432\u0441\u0435 \u0437\u0430\u0431\u0438\u043b\u0438. \u0410 \u043f\u043e\u0442\u043e\u043c IE \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u043b\u0441\u044f \u0432 Edge, Edge \u0441\u043c\u0435\u043d\u0438\u043b \u0434\u0432\u0438\u0436\u043e\u043a, \u0438 \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e SMIL \u201c\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u201d \u0432\u043e \u0432\u0441\u0435\u0445 \u0432\u0435\u0447\u043d\u043e\u0437\u0435\u043b\u0435\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u0412\u0435\u0447\u043d\u043e\u0437\u0435\u043b\u0435\u043d\u044b\u0439 \u0437\u043e\u043c\u0431\u0438, \u0435\u0441\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u043a \u0441\u043a\u0430\u0437\u0430\u0442\u044c.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c SMIL \u0432\u0440\u043e\u0434\u0435 \u043a\u0430\u043a \u0431\u044b \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0422\u0430\u043a \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0436\u043d\u043e. \u041d\u043e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u043d\u0435 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u0442\u0441\u044f. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0435\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432 \u043f\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e.<\/p>\n<p>  <\/p>\n<p>\u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445 \u2014 \u044d\u0442\u043e \u043a\u0440\u043e\u0441\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0441\u0442\u044c. \u0422\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043d\u0430 \u044d\u0442\u043e\u043c \u043f\u043e\u043b\u0435 \u043d\u0438\u043a\u0442\u043e \u043d\u0435 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0435 \u0432\u0441\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0443\u043c\u0435\u044e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0431\u043e\u043b\u044c\u0448\u0435 1 \u0432 \u043a\u0440\u0438\u0432\u044b\u0445 \u0411\u0435\u0437\u044c\u0435. \u0414\u0430, \u0432 2022 \u0433\u043e\u0434\u0443. \u0418 \u0442\u0430\u043a\u0438\u0445 \u0433\u043b\u0443\u043f\u043e\u0441\u0442\u0435\u0439 \u0442\u0430\u043c \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e. \u0418 \u0435\u0441\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0437\u0430\u0442\u044b\u043a \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0432 \u044d\u0442\u0438\u0445 \u0441\u0430\u043c\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0442\u043e\u0436\u0435 \u043d\u0435 \u0438\u043c\u0435\u044e\u0442 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438 \u0441 \u044d\u0442\u043e\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0435\u0439. \u0423 \u043d\u0430\u0441 \u0434\u0430\u0436\u0435 \u043d\u0435\u0442 \u0430\u0434\u0435\u043a\u0432\u0430\u0442\u043d\u044b\u0445 \u043b\u0438\u043d\u0442\u0435\u0440\u043e\u0432, \u0430 \u043e\u0442 \u0444\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e W3C-\u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440\u0430 \u043f\u043e\u043b\u044c\u0437\u044b \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0442\u043e \u0438 \u043c\u043d\u043e\u0433\u043e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0442\u043b\u0430\u0434\u043a\u0430 \u043f\u043e\u0440\u043e\u0439 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u0431\u043e\u043b\u0435\u0437\u043d\u0435\u043d\u043d\u043e\u0439 \u2014 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0437\u043d\u0430\u0442\u044c, \u043a\u0443\u0434\u0430 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u0438 \u0432\u044b\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438 \u0433\u043b\u0430\u0437\u0430\u043c\u0438 \u0432 \u043a\u043e\u0434\u0435. \u042d\u0442\u043e \u0437\u0430\u043d\u044f\u0442\u0438\u0435 \u043e\u0447\u0435\u043d\u044c \u043d\u0430 \u043b\u044e\u0431\u0438\u0442\u0435\u043b\u044f, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432 \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0445.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u0447\u0435\u043c\u0443-\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c SVG \u0432 \u0432\u0438\u0434\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0433\u043e \u0444\u0430\u0439\u043b\u0430, \u0442\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0432\u043e\u043f\u0440\u043e\u0441 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u041e\u0431\u044b\u0447\u043d\u043e \u043b\u044e\u0434\u0438 \u0441\u0447\u0438\u0442\u0430\u044e\u0442, \u0447\u0442\u043e \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u2014 \u044d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e. \u041d\u043e \u0437\u0430\u0433\u0432\u043e\u0437\u0434\u043a\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0442\u043e\u0436\u0435 \u043a\u0435\u0448\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0415\u0441\u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0430\u0441\u044c, \u0442\u043e \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0435\u0441\u0442\u044c \u043d\u0435\u043d\u0443\u043b\u0435\u0432\u0430\u044f \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c, \u0447\u0442\u043e \u043e\u043d\u0430 \u043d\u0435 \u043d\u0430\u0447\u043d\u0435\u0442\u0441\u044f \u0437\u0430\u043d\u043e\u0433\u043e. \u041d\u0435 \u0440\u0430\u0437 \u0432\u0438\u0434\u0435\u043b \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u043e\u0432, \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u0438 \u0432\u0435\u0440\u0441\u0442\u043a\u0435 \u0441 \u0432\u0435\u0431\u043f\u0430\u043a\u043e\u043c \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0430 \u043f\u043e\u0442\u043e\u043c \u043f\u0440\u0438 \u0440\u0430\u0441\u043a\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u0438 \u0441\u0430\u0439\u0442\u0430 \u043d\u0430 \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u2014 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0437\u0430\u043b\u0438\u043f\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. \u042d\u0442\u043e \u0432 \u0442\u0435\u043e\u0440\u0438\u0438 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432, \u0437\u0430\u043f\u0440\u0435\u0449\u0430\u044e\u0449\u0438\u0445 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u043d\u043e \u043d\u0430 \u0434\u0435\u043b\u0435 \u043e\u043d\u043e \u043a\u0430\u043a-\u0442\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u041f\u043b\u044e\u0441 \u043c\u044b \u0437\u0430\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u0448\u0442\u0443\u043a\u0438 \u043d\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0447\u0442\u043e \u0441\u0430\u043c\u043e \u043f\u043e \u0441\u0435\u0431\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u043e\u0441\u0442\u044b\u043b\u0435\u043c. \u041c\u043e\u0436\u043d\u043e \u0432\u0441\u0435 \u0440\u0435\u0448\u0438\u0442\u044c \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0432 url \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0435\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u043b \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437. \u041d\u043e \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u043a\u043e\u0441\u0442\u044b\u043b\u044c. \u041f\u043b\u044e\u0441 \u0432\u0441\u0435 \u044d\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0441 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0442.\u043a. \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043f\u043e \u0441\u0435\u0442\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e. \u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u0435\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043d\u0435 \u0443\u0434\u043e\u0431\u043d\u043e. \u0412\u0441\u0435 \u044d\u0442\u043e \u043d\u0430\u0440\u0430\u0441\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u0441\u043d\u0435\u0436\u043d\u044b\u0439 \u043a\u043e\u043c. \u0422\u0430\u043a \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 SVG \u0441\u043e SMIL-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0438 \u0432 \u0432\u0438\u0434\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0432 \u0446\u0435\u043b\u043e\u043c \u0438\u0434\u0435\u044f \u0441\u043f\u043e\u0440\u043d\u0430\u044f. \u041f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430. \u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u043d\u0430\u0435\u0442\u0435, \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u2014 \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445.<\/p>\n<p>  <\/p>\n<p>\u0421 inline svg \u0432\u0441\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0449\u0435 \u2014 \u0442\u0430\u043c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c SMIL-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 begin=&#8217;indefinite&#8217; \u0438 \u043c\u0435\u0442\u043e\u0434\u0430 beginElement, \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a\u043e \u0432\u0441\u0435\u043c\u0443 \u0438\u0437 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u043e \u043c\u0435\u0440\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0440\u0430\u0441\u0442\u0435\u0442 \u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043e\u043a \u0438 \u043f\u0440\u043e\u0441\u043b\u043e\u0435\u043a, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0441 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0443\u0441\u043b\u043e\u0432\u043d\u043e\u0433\u043e SPA. \u0422\u043e\u0436\u0435 \u043d\u0435 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u043d\u043e \u043e\u043d \u044f\u0432\u043d\u043e \u0443\u0434\u043e\u0431\u043d\u0435\u0435, \u0447\u0435\u043c \u0441 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438. \u041f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435 \u0432\u0441\u0435 \u043d\u0430\u0434\u0435\u0436\u043d\u043e \u0438 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u043e.<\/p>\n<p>  <\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 SMIL \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u043f\u0440\u0430\u0432\u0434\u0430\u043d\u043e \u0432 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043c\u043e\u0440\u0444\u0438\u043d\u0433 \u0438\u043b\u0438 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043f\u043e \u043a\u0440\u0438\u0432\u044b\u043c \u0432 \u0438\u043a\u043e\u043d\u043a\u0430\u0445. \u042d\u0442\u043e \u0432\u0435\u0449\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 CSS \u0438\u043b\u0438 \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u0438\u043b\u0438 \u0440\u0435\u0447\u044c \u0438\u0434\u0435\u0442 \u043e \u0441\u0442\u0440\u0430\u0448\u043d\u044b\u0445 \u043a\u043e\u0441\u0442\u044b\u043b\u044f\u0445. \u0422\u0430\u043a\u0436\u0435 \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0438 JS-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c SMIL-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0438 \u0438\u043d\u043e\u0433\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043c\u0430\u0448\u0438\u043d\u043d\u043e-\u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434, \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0438\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438. \u0412 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 SMIL \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0435\u0446\u0435\u043b\u0435\u0441\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u043c \u0438\u0437-\u0437\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u0438\u0437\u0434\u0435\u0440\u0436\u0435\u043a, \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0449\u0438\u0445 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043a\u043e\u0434\u043e\u043c, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u0438\u0434\u0435\u0442 \u043d\u0435 \u0442\u0430\u043a.<\/p>\n<p>  <\/p>\n<h2 id=\"animirovanie-svg-s-pomoschyu-js\">\u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 SVG \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JS<\/h2>\n<p>  <\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u2014 \u044d\u0442\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u044b. \u0412 \u0446\u0435\u043b\u043e\u043c \u0437\u0434\u0435\u0441\u044c, \u043a\u0430\u043a \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 CSS, \u0432\u0441\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u0445 \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0442\u043e\u0434\u044b \u0432\u0440\u043e\u0434\u0435 querySelector \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c setAttribute \u0447\u0442\u043e\u0431\u044b \u043c\u0435\u043d\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0443 \u0442\u0435\u0433\u043e\u0432. \u0420\u0430\u0434\u0438 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b \u0438\u0433\u0440\u044b \u0441 innerHTML \u0438\u043b\u0438 \u0435\u0449\u0435 \u0447\u0442\u043e-\u0442\u043e \u0442\u0430\u043a\u043e\u0435. \u041d\u043e \u0432 \u0446\u0435\u043b\u043e\u043c \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u0432\u0435\u0440\u0445\u044a\u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e. \u042d\u0442\u043e \u0432\u0441\u0435 \u0438 \u043d\u0435 \u0443\u0434\u0438\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0442.\u043a. \u0440\u0435\u0447\u044c \u0438\u0434\u0435\u0442 \u043e \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0445 \u043d\u0430\u043c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u0432\u043e \u0432\u0441\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445.<\/p>\n<p>  <\/p>\n<p>\u0412\u0430\u0436\u043d\u043e\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f CSS\/SMIL \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u0430\u043c\u0438 \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u043f\u043e\u043b\u043d\u0443\u044e \u0441\u0432\u043e\u0431\u043e\u0434\u0443 \u0432 \u043f\u043b\u0430\u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432 \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u0442\u0440\u0430\u0435\u043a\u0442\u043e\u0440\u0438\u0439 \u043f\u0435\u0440\u0435\u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u043b\u0438 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u043e\u0440\u043c\u0443\u043b\u044b, \u0440\u0430\u043d\u0434\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u044e, \u0440\u0430\u0441\u0447\u0435\u0442\u044b \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043a\u043e\u0434 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u043a\u043e\u0434. \u041a\u0430\u043a \u043d\u0430\u0431\u043e\u0440 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u043e-\u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439. \u0411\u0435\u0437\u0443\u0441\u043b\u043e\u0432\u043d\u043e \u0438 \u043d\u0430 CSS \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 keyframes \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0445\u0430\u043a\u0438 \u0441\u043e \u0441\u043a\u0440\u044b\u0442\u044b\u043c\u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u043d\u043e \u043a\u043e\u0434 \u043d\u0430 JS \u0432 \u0442\u0430\u043a\u0438\u0445 \u0437\u0430\u0434\u0430\u0447\u0430\u0445 \u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e\u0449\u0435, \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c. \u041f\u0440\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043c\u044b \u0435\u0449\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u0434\u0430\u043b\u044c\u0448\u0435, \u043d\u043e \u0437\u0430\u0431\u0435\u0433\u0430\u044f \u0432\u043f\u0435\u0440\u0435\u0434 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u0432\u0441\u0435 \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u0438 \u043f\u043b\u043e\u0445\u043e, \u043a\u0430\u043a \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434.<\/p>\n<p>  <\/p>\n<p>\u0412\u0430\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u043e\u0441\u043e\u0437\u043d\u0430\u0442\u044c, \u0447\u0442\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 SVG \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JS \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442 \u0441\u0430\u043c \u0444\u043e\u0440\u043c\u0430\u0442 SVG. \u0412\u0441\u0435 \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f. \u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 SVG \u043a\u0430\u043a \u0438 \u0440\u0430\u043d\u044c\u0448\u0435. \u042d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043a\u0443\u044e \u0438 \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0432 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0438 \u043a\u043e\u0434\u043e\u0432\u0443\u044e \u0431\u0430\u0437\u0443 \u043f\u0440\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0441\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447. \u041d\u043e \u043d\u0435 \u0431\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e.<\/p>\n<p>  <\/p>\n<h3 id=\"instrumenty-dlya-interpolyacii-znacheniy-vo-vremeni\">\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0446\u0438\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438<\/h3>\n<p>  <\/p>\n<p>\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 99.9% \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f SVG \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u2014 \u044d\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0446\u0438\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439. \u042d\u0442\u043e \u043b\u043e\u0433\u0438\u0447\u043d\u043e: \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0430 \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0438\u043c\u0435\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u044d\u0442\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439, \u0438, \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u043b\u043e\u0433\u0438\u043a\u0443 \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043c\u0435\u0436\u0434\u0443 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u043c \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u0445.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0440\u0430\u043c\u043a\u0430\u0445 CSS \u0438 SMIL \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u0435\u0441\u0442\u044c \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439, \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u0432 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043b\u043e\u0433\u0438\u043a\u0443 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0434\u043d\u0438\u0445 \u0437\u0430 \u0434\u0440\u0443\u0433\u0438\u043c\u0438, \u0430 \u0432 JS \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u0442\u0430\u043a\u043e\u0433\u043e \u043d\u0435\u0442. \u0412\u043e \u0432\u0441\u044f\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u043e\u043a\u0430 \u043d\u0435\u0442. \u041c\u044b \u0431\u0435\u0433\u043b\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0448\u0442\u0443\u043a, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0435\u043c \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f. \u041a\u0430\u043a\u0438\u0435-\u0442\u043e \u0434\u0435\u0442\u0430\u043b\u0438 \u0442\u0430\u043c \u043c\u043e\u0433\u0443\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f, \u043d\u043e \u0438\u0434\u0435\u0438 \u0432 \u043a\u043e\u0440\u043d\u0435 \u0432\u0435\u0437\u0434\u0435 \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435. <\/p>\n<p>  <\/p>\n<p>\u0412 \u0446\u0435\u043b\u043e\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0446\u0438\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043d\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e, \u0438 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u043f\u0440\u0430\u0432\u0434\u0430\u043d\u043d\u044b\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c \u0432 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445, \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435 \u0441 \u043c\u0435\u0442\u043e\u0434\u0430 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/window\/requestAnimationFrame\" rel=\"nofollow noopener noreferrer\">requestAnimationFrame<\/a>. \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u043c\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c, \u0447\u0442\u043e\u0431\u044b \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0449\u0435\u0435 \u0432 \u043a\u043e\u0434\u0435 \u0441 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c \u043a\u0430\u0434\u0440\u043e\u0432 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041a\u0430\u0436\u0434\u044b\u0439 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u0430\u0434\u0440 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430. \u0412 \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0435\u043c \u0432\u0438\u0434\u0435 \u0434\u043b\u044f \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0442\u0430\u043a\u043e\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">function updateElement() {     \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432      requestAnimationFrame(updateElement); }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/628a1df05bce1f4fead98711\" data-style=\"\" id=\"628a1df05bce1f4fead98711\" width=\"\"><\/div>\n<\/div>\n<p>  <\/p>\n<p>\u041d\u0430 \u0441\u0435\u0433\u043e\u0434\u043d\u044f\u0448\u043d\u0438\u0439 \u0434\u0435\u043d\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c FPS \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f 60 \u043a\u0430\u0434\u0440\u043e\u0432 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443. \u0418\u043b\u0438 120, \u0434\u043b\u044f \u044d\u043a\u0440\u0430\u043d\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044d\u0442\u043e \u0443\u043c\u0435\u044e\u0442. \u042d\u0442\u043e \u043d\u0435 \u0442\u043e, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0430. \u0417\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0430. \u0414\u043b\u044f \u043d\u0430\u0441 \u0432\u0430\u0436\u043d\u043e, \u0447\u0442\u043e \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 requestAnimationFrame \u043d\u0430\u0448\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u044d\u0442\u0438 \u0441\u0430\u043c\u044b\u0435 60, \u0438\u043b\u0438 120, \u0438\u043b\u0438 \u043a\u0430\u043a\u0430\u044f \u0442\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u0447\u0430\u0441\u0442\u043e\u0442\u0430 \u0443 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0430, \u0440\u0430\u0437 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443. \u041d\u043e \u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435. \u042d\u0442\u043e \u0432\u0430\u0436\u043d\u043e. \u0415\u0441\u043b\u0438 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0446\u0438\u043a\u043b, \u0442\u043e \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043a\u0440\u0443\u0442\u0438\u0442\u044c\u0441\u044f \u0441 \u0442\u0430\u043a\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0441\u043f\u043e\u0441\u043e\u0431\u0435\u043d \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440 \u0432 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435, \u0430 requestAnimationFrame \u2014 \u044d\u0442\u043e \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u043b\u043a\u0430, \u0441\u043d\u0438\u043c\u0430\u044e\u0449\u0430\u044f \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441 \u0436\u0435\u043b\u0435\u0437\u0430. \u0415\u0441\u043b\u0438 \u0436\u0435 \u043d\u0430\u0448\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0442\u044f\u0436\u0435\u043b\u043e\u0439, \u0431\u0443\u0434\u0435\u0442 \u0447\u0442\u043e-\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0434\u043e\u043b\u0433\u043e, \u0442\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u0430\u0434\u0440\u044b \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043d\u0430\u0448\u0438 \u0440\u0430\u0441\u0447\u0435\u0442\u044b \u043d\u0435 \u0437\u0430\u043a\u043e\u043d\u0447\u0430\u0442\u0441\u044f. \u0411\u0443\u0434\u0435\u0442 \u0432\u0438\u0434\u0438\u043c\u0430\u044f \u043f\u0440\u043e\u0441\u0430\u0434\u043a\u0430 FPS, \u043d\u043e \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u0448\u0442\u0430\u0442\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435, \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0435 \u043f\u043e\u0432\u0435\u0441\u0438\u0442\u0441\u044f. \u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e.<\/p>\n<p>  <\/p>\n<blockquote><p>\u042d\u043a\u0440\u0430\u043d\u044b \u0441 \u0432\u044b\u0441\u043e\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u043e\u0442\u043e\u0439 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u0431\u044b\u0447\u043d\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442 \u0445\u043e\u0440\u043e\u0448\u0435\u0435 \u0436\u0435\u043b\u0435\u0437\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0438 \u043d\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442 \u043d\u0430\u0448\u0438\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. \u041d\u043e. \u0415\u0441\u043b\u0438 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c 1000ms \u043d\u0430 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0435 60 \u043a\u0430\u0434\u0440\u043e\u0432 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443 \u0434\u043b\u044f \u0442\u0438\u043f\u043e\u0432\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u0441\u0440\u0435\u0434\u043d\u0435\u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043d\u043e\u0443\u0442\u0431\u0443\u043a\u043e\u0432, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f 16.5ms \u043d\u0430 \u043a\u0430\u0434\u0440. \u042d\u0442\u043e \u0432\u0440\u0435\u043c\u044f, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0430\u0448\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0431\u044b\u043b\u043e \u043e\u043a. \u041d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u0431\u044b\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432\u043e\u043e\u0431\u0449\u0435-\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u044f \u0437\u0430\u043d\u044f\u0442 \u0438 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0434\u0435\u043b\u0430\u043c\u0438, \u043f\u043e\u043c\u0438\u043c\u043e \u043d\u0430\u0448\u0438\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438 \u043e\u0446\u0435\u043d\u043a\u0435 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u0438 \u0442\u0435\u0441\u0442\u0430\u0445 \u043d\u0430 \u0441\u043b\u0430\u0431\u043e\u043c \u0436\u0435\u043b\u0435\u0437\u0435 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0434\u0443\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u0443 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0432\u0441\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0430 \u0431\u0443\u0434\u0443\u0442 \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432\u0441\u0435 16.5ms. \u0427\u0442\u043e-\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u044f\u0442\u043e \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430\u043c\u0438. \u0422\u0430\u043a \u0447\u0442\u043e \u0431\u043b\u0438\u0437\u043a\u043e \u043a \u044d\u0442\u043e\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u0435 \u043b\u0443\u0447\u0448\u0435 \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442\u044c.<\/p><\/blockquote>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f requestAnimationFrame \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u043a\u043e\u043b\u0431\u0435\u043a\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0442\u0443\u0434\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f. \u0421\u043b\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u0442\u043e\u0447\u043d\u043e\u0435, \u0442.\u043a. \u0432 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0438\u0437 \u0441\u043e\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438 \u0434\u0430\u0436\u0435 performance.now() \u0432\u0440\u043e\u0434\u0435 \u043a\u0430\u043a \u0438\u043c\u0435\u0435\u0442 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u0443\u044e \u043f\u043e\u0433\u0440\u0435\u0448\u043d\u043e\u0441\u0442\u044c, \u043d\u043e \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u043f\u043b\u044e\u0441-\u043c\u0438\u043d\u0443\u0441 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0438 \u0432\u0440\u0435\u043c\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u043d\u0435\u0445\u0438\u0442\u0440\u044b\u0435 \u0440\u0430\u0441\u0447\u0435\u0442\u044b \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0435\u0441\u0442\u044c \u043d\u0430\u0447\u0430\u043b\u043e \u0438 \u043a\u043e\u043d\u0435\u0446 (\u0442\u0443\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0443\u0441\u043b\u043e\u0432\u043d\u043e\u0433\u043e JS-\u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043e\u0434\u0430, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0440\u0430\u0437\u0434\u0443\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0432 \u0441\u0442\u0430\u0442\u044c\u0435, \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430 \u0433\u0438\u0442\u0445\u0430\u0431\u0435):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">function updateElement(time) {     const timeFraction = (time - startTime) \/ duration;      if (timeFraction >= 1) {         \/\/ \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0430\u0441\u044c     } else {         const progress = easingFunction(timeFraction);         \/\/ \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432,         \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043e\u0442 0 \u0434\u043e 1         requestAnimationFrame(updateElement);     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u0446\u0435\u043b\u043e\u043c \u0440\u0430\u0441\u0447\u0435\u0442 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043d\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e, \u0435\u0441\u043b\u0438 \u0438\u043c\u0435\u0442\u044c \u043a\u0443\u043b\u044c\u0442\u0443\u0440\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043e\u0442 0 \u0434\u043e 1. \u0427\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0439\u0434\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u2014 \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0442 0 \u0434\u043e 1. \u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u2014 \u043e\u0442 0 \u0434\u043e 1. \u0412\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u043d\u0430 \u0432\u0445\u043e\u0434 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0442 0 \u0434\u043e 1 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0442 0 \u0434\u043e 1. \u0415\u0441\u043b\u0438 \u044d\u0442\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0442\u043e \u043e\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c 0 \u0434\u043b\u044f 0 \u043d\u0430 \u0432\u0445\u043e\u0434\u0435, \u0438, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, 1 \u0434\u043b\u044f 1 \u043d\u0430 \u0432\u0445\u043e\u0434\u0435. \u041a\u043e\u0433\u0434\u0430 \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d \u043d\u0430 \u0442\u0430\u043a\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0435, \u0432 \u043d\u0435\u043c \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e \u043a\u0443\u0434\u0430 \u0443\u0433\u043e\u0434\u043d\u043e, \u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u0440\u043e\u0449\u0435 \u0435\u0433\u043e \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c, \u0442.\u043a. \u043c\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u0437\u043d\u0430\u0435\u043c, \u043a\u0430\u043a\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0432 \u043a\u0430\u043a\u0438\u0445 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f. \u0412 CSS \u0443 \u043d\u0430\u0441 \u0432\u0441\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a\u0438\u0435, \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u043b\u0438\u0441\u044c. \u041a\u0430\u043a \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u043d\u0430 JS, \u043f\u043e\u0434\u0447\u0438\u043d\u044f\u044e\u0449\u0438\u0445\u0441\u044f \u044d\u0442\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">function easeLinear(x) {     return x; }  function easeInCubic(x) {     return x * x * x; }  function easeInExpo(x) {     if (x === 0) {         return 0;     } else {         return Math.pow(2, 10 * x - 10);     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0435\u043f\u043b\u043e\u0445\u0430\u044f \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u0430 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u0435\u0441\u0442\u044c \u043d\u0430 <a href=\"https:\/\/easings.net\/\" rel=\"nofollow noopener noreferrer\">https:\/\/easings.net\/<\/a>. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u044d\u0442\u0430 \u0442\u0435\u043c\u0430 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0432 \u043d\u0435\u0439.<\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435, \u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438, \u043b\u0435\u0433\u043a\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u043f\u0440\u044f\u043c\u044b\u0445 \u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0445 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0439 \u0441 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u043e\u043c \u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443, \u043e\u0442 1 \u0434\u043e 0, \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0445 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043c\u043e\u0436\u043d\u043e \u043a\u0430\u043a-\u0442\u043e \u044d\u0442\u043e \u0432\u0441\u0435 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f. \u041f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u043a\u043e\u0433\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u0443\u0447\u0435\u0431\u043d\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 <a href=\"https:\/\/github.com\/sfi0zy\/weeee\" rel=\"nofollow noopener noreferrer\">\u0435\u0441\u0442\u044c \u043d\u0430 github<\/a>. \u041d\u0435 \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e \u0435\u0433\u043e \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442\u043e\u0439. \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0438\u0434\u0435\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043f\u043e\u043d\u044f\u0442\u043d\u044b \u0438\u0437 \u0442\u0435\u043a\u0443\u0449\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432. \u0422\u0443\u0442 \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0430\u0436\u043d\u043e \u043e\u0441\u043e\u0437\u043d\u0430\u0442\u044c \u043e\u0431\u0449\u0438\u0439 \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u044d\u0442\u0438\u0445 \u0440\u0430\u0441\u0447\u0435\u0442\u043e\u0432 \u2014 \u043e\u043d \u043f\u043e\u0442\u043e\u043c \u0432\u043e \u0432\u0441\u0435\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u0445 \u0431\u0443\u0434\u0435\u0442 \u043f\u043b\u044e\u0441-\u043c\u0438\u043d\u0443\u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c.<\/p>\n<p>  <\/p>\n<h3 id=\"biblioteki\">\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/h3>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0442\u043e \u0438\u0434\u0435\u044f \u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0441\u0435 \u0441\u0430\u043c\u043e\u043c\u0443 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0432\u0441\u0435 \u043c\u0435\u043d\u0435\u0435 \u0440\u0430\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0439. \u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u043e\u0441\u0442\u0438 \u0431\u044b\u0441\u0442\u0440\u043e \u0442\u0435\u0440\u044f\u0435\u0442\u0441\u044f, \u0430 \u0432\u0441\u044f \u044d\u0442\u0430 \u043b\u043e\u0433\u0438\u043a\u0430 \u0441 \u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u0443\u0436\u0435 \u0431\u044b\u043b\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u043d\u0435 \u043e\u0434\u043d\u0443 \u0441\u043e\u0442\u043d\u044e \u0440\u0430\u0437 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c\u0438. \u0415\u0441\u0442\u044c \u0434\u0432\u0430 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u0438\u043c\u043e \u0432\u0441\u0435\u0433\u043e \u043f\u0440\u043e\u0447\u0435\u0433\u043e \u0443\u043c\u0435\u044e\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u2014 \u044d\u0442\u043e GSAP \u0438 Anime.js.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/1x\/gk\/cd\/1xgkcd2u0bau5aq-mcvbc0nwemo.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/1x\/gk\/cd\/1xgkcd2u0bau5aq-mcvbc0nwemo.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p><a href=\"https:\/\/greensock.com\/gsap\/\" rel=\"nofollow noopener noreferrer\">GSAP<\/a> \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u0443\u0436\u0435 \u043b\u0435\u0442 10 \u043d\u0430\u0437\u0430\u0434, \u0438 \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u043d \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u043a\u0440\u0435\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043e\u043d\u043a\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043b \u0441 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0435\u0439 flash. \u0427\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0430 \u043d\u0435\u0433\u043e \u0441\u043c\u043e\u0442\u0440\u0438\u0448\u044c, \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0448\u044c, \u043f\u043e\u0447\u0435\u043c\u0443 \u043e\u043d \u0442\u0430\u043a\u043e\u0439, \u043a\u0430\u043a\u043e\u0439 \u0435\u0441\u0442\u044c. \u042f\u0440\u043e\u0441\u0442\u043d\u044b\u0439 \u043c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433 \u043f\u0440\u043e \u043d\u043e\u0432\u044b\u0439 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432 \u0432\u0435\u0431\u0435 \u0441\u043e \u0432\u0441\u044f\u043a\u0438\u043c\u0438 \u043f\u0435\u0440\u043b\u0430\u043c\u0438 \u0434\u043b\u044f \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u0432 \u0432 \u0434\u0443\u0445\u0435 &#171;\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043d\u0430 GSAP \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043d\u0430 JS\u201d (\u0445\u043e\u0442\u044f GSAP \u0441\u0430\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 JS \u0438 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0441\u0430\u043c\u043e\u0433\u043e \u0441\u0435\u0431\u044f), \u0444\u043e\u0440\u0443\u043c \u0441 \u043f\u043b\u0430\u0442\u043d\u043e\u0439 \u0442\u0435\u0445\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0438 \u043e\u0431\u0443\u0447\u0435\u043d\u0438\u0435\u043c, \u043c\u043e\u043d\u0441\u0442\u0440\u0443\u043e\u0437\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f, \u043a\u0443\u0447\u0430 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u043d\u0430 \u043b\u044e\u0431\u044b\u0435 \u043e\u0431\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432 \u043f\u043e\u0432\u0441\u0435\u0434\u043d\u0435\u0432\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u0435 \u0432 \u0440\u044f\u0434\u043e\u0432\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\u0445 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043e\u0442 \u0441\u0438\u043b\u044b 10% \u2014 \u044d\u0442\u043e \u0432\u0441\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u0438\u0435 \u0438\u0437 \u0442\u0435\u0445 \u0432\u0440\u0435\u043c\u0435\u043d. \u041d\u043e \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u0434\u0430\u0442\u044c \u0434\u043e\u043b\u0436\u043d\u043e\u0435 \u2014 \u0437\u0430 \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0432\u044b\u043b\u0438\u0437\u0430\u043b\u0438, \u0447\u0442\u043e-\u0442\u043e \u0443\u0431\u0440\u0430\u043b\u0438, \u0433\u0434\u0435-\u0442\u043e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u043b\u0438, \u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043e\u043d \u043e\u0447\u0435\u043d\u044c \u0434\u0430\u0436\u0435 \u0445\u043e\u0440\u043e\u0448\u043e. \u0425\u043e\u0442\u044f \u0432\u0441\u0435 \u0435\u0449\u0435 \u0447\u0430\u0441\u0442\u043e \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u0448\u0430\u0435\u043c\u044b\u0445 \u0437\u0430\u0434\u0430\u0447.<\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043a\u043e\u043b\u0435\u043d\u0438\u0435 \u0431\u043e\u043b\u0435\u0435 \u043c\u043e\u043b\u043e\u0434\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044c \u043b\u0435\u0442 \u043d\u0430 5 \u043f\u043e\u0441\u043b\u0435 GSAP, \u043a\u043e\u0433\u0434\u0430 flash \u0443\u0436\u0435 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u043b\u0441\u044f, \u0441\u0442\u0430\u0440\u044b\u0435 IE \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u043e\u0442\u043c\u0438\u0440\u0430\u043b\u0438, \u043f\u043e\u044f\u0432\u043b\u044f\u043b\u0441\u044f ES6, SPA-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438, \u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u043e\u0441\u044c \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e. \u0427\u0442\u043e \u0432 \u043d\u0435\u0439 \u043d\u0443\u0436\u043d\u043e. \u042d\u0442\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e, \u0447\u0442\u043e \u0432\u043e\u0441\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u043e \u0432 \u043f\u043e\u0432\u0441\u0435\u0434\u043d\u0435\u0432\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u0435, \u0438 \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u043c \u043e\u0441\u0442\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u044b\u043c\u0438 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 GSAP. \u041e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u043c \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0441 \u0431\u043e\u043b\u0435\u0435-\u043c\u0435\u043d\u0435\u0435 \u0442\u0438\u043f\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u043e\u0439, \u0433\u0434\u0435 \u043d\u0435\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0438 \u0432 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0438\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f\u0445. \u041f\u043e\u0445\u043e\u0436\u0435, \u0447\u0442\u043e \u0441\u0430\u043c\u044b\u0439 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0432 \u044d\u0442\u043e\u043c \u043f\u043e\u043a\u043e\u043b\u0435\u043d\u0438\u0438 \u2014 \u044d\u0442\u043e <a href=\"https:\/\/animejs.com\/\" rel=\"nofollow noopener noreferrer\">Anime.js<\/a>.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/ym\/ur\/ak\/ymurak7grweu8cc0qv1o_a5uvb8.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/ym\/ur\/ak\/ymurak7grweu8cc0qv1o_a5uvb8.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043a\u0430\u043a \u0432\u044b \u0443\u0436\u0435 \u043f\u043e\u043d\u044f\u043b\u0438, \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0435. \u0418\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043b\u044e\u0431\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u041c\u043e\u0436\u043d\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0435\u043d\u044f\u0442\u044c, \u043c\u043e\u0436\u043d\u043e \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 \u0441\u043a\u0440\u0438\u043f\u0442\u0430\u0445 \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0438 \u0433\u0434\u0435-\u0442\u043e \u043f\u043e\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. \u0412 WebGL \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440. \u041d\u043e \u0435\u0441\u0442\u044c \u043a\u043b\u0430\u0441\u0441 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0431\u043e\u043b\u0435\u0435 \u0443\u0437\u043a\u043e\u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0430\u043b\u0438\u0441\u044c \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 SVG. \u041c\u044b \u0432\u0435\u0434\u044c \u043f\u0440\u043e \u044d\u0442\u043e \u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0433\u043e\u0432\u043e\u0440\u0438\u043c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <a href=\"http:\/\/snapsvg.io\/\" rel=\"nofollow noopener noreferrer\">Snap.svg<\/a>. \u041f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0437\u0430\u0433\u0443\u0433\u043b\u0438\u0442\u044c. \u0422\u0430\u043c \u0435\u0441\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043e\u0431\u044a\u0435\u043c\u043d\u044b\u0435, \u0435\u0441\u0442\u044c \u043c\u0435\u043d\u0435\u0435. \u041a\u0430\u043a\u0438\u0435-\u0442\u043e \u0440\u0435\u0448\u0430\u044e\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0443 \u0437\u0430\u0434\u0430\u0447\u0443, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043f\u043e \u043a\u0440\u0438\u0432\u043e\u0439. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u043d\u0438\u0445, \u0432\u0440\u043e\u0434\u0435 Rapha\u00ebl, \u0443\u0445\u043e\u0434\u044f\u0442 \u043a\u043e\u0440\u043d\u044f\u043c\u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0430 IE6. \u041c\u043e\u0436\u0435\u0442\u0435 \u0441\u0435\u0431\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c, \u043a\u0430\u043a\u043e\u0439 \u0430\u0434\u044a \u0442\u0430\u043c \u0432\u043d\u0443\u0442\u0440\u0438.<\/p>\n<p>  <\/p>\n<p>\u0423\u0434\u043e\u0431\u043d\u043e \u0432\u0441\u0435 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u043a jQuery \u0434\u043b\u044f SVG. \u041e\u043d\u0438 \u0434\u0430\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u043d\u0430\u0434 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c\u0438 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0442 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0434\u0440\u0435\u0432\u043d\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043a\u0440\u043e\u0441\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0441\u0442\u0438 (\u0438\u043d\u043e\u0433\u0434\u0430 \u0442\u0430\u043c \u0432\u043d\u0443\u0442\u0440\u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f SMIL-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430), \u0435\u0441\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0435\u0449\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0447\u0430\u0441\u0442\u043e \u043d\u0443\u0436\u043d\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u0431\u044b\u043b\u043e \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c. \u0410\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u044d\u0442\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043d\u0430\u0448\u0435 \u0432\u0440\u0435\u043c\u044f \u2014 \u0442\u0430\u043a\u0430\u044f \u0436\u0435, \u043a\u0430\u043a \u0438 \u0443 jQuery. \u0415\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0441 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c. \u0415\u0441\u043b\u0438 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0438\u0437 \u043d\u0438\u0445 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0434 \u043d\u0430\u0448\u0438 \u0437\u0430\u0434\u0430\u0447\u0438 \u2014 \u043e\u043a, \u0431\u0435\u0440\u0435\u043c. \u041d\u043e \u0435\u0441\u043b\u0438 \u0440\u0435\u0447\u044c \u043f\u0440\u043e \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u0447\u0438\u0441\u0442\u043e\u0433\u043e \u043b\u0438\u0441\u0442\u0430, \u0438 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0439 GSAP \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u2014 \u043c\u043e\u0436\u0435\u0442 \u0438 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b \u043e\u043d\u0438. \u0412\u043e\u043f\u0440\u043e\u0441\u044b \u043a\u0440\u043e\u0441\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0441\u0442\u0438 \u0441\u0435\u0439\u0447\u0430\u0441 \u0443\u0436\u0435 \u043d\u0435 \u0441\u0442\u043e\u044f\u0442 \u0442\u0430\u043a \u0436\u0435 \u043e\u0441\u0442\u0440\u043e, \u043a\u0430\u043a \u043a\u043e\u0433\u0434\u0430-\u0442\u043e, \u0430 \u0432 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447\u0430\u0445 \u0441\u0430\u043c\u0430 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u043e \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0445\u0438\u0442\u0440\u044b\u0445 \u0440\u0430\u0441\u0447\u0435\u0442\u0430\u0445, \u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0430\u0445\u0430\u0440\u043d\u044b\u0435 \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u043d\u0435 \u043e\u0441\u043e\u0431\u043e \u0441 \u044d\u0442\u0438\u043c \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442.<\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u0435\u0441\u0442\u044c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043a\u043b\u0430\u0441\u0441 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u043e\u0431\u0449\u0435-\u0442\u043e \u0440\u0435\u0448\u0430\u044e\u0442 \u043f\u0435\u0440\u043f\u0435\u043d\u0434\u0438\u043a\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c \u0437\u0430\u0434\u0430\u0447\u0438, \u0445\u043e\u0442\u044f \u0433\u0434\u0435-\u0442\u043e \u0432 \u0441\u0432\u043e\u0438\u0445 \u043d\u0435\u0434\u0440\u0430\u0445 \u0443\u043c\u0435\u044e\u0442 \u0447\u0442\u043e-\u0442\u043e \u0442\u0430\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0418 \u043f\u043e\u0447\u0435\u043c\u0443-\u0442\u043e \u0447\u0430\u0441\u0442\u043e \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u0435\u0442 \u0432\u043e\u043f\u0440\u043e\u0441 \u0432 \u0434\u0443\u0445\u0435 &#171;\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u0438 \u044d\u0442\u043e\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043a\u0430\u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435?&#187;. \u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u2014 <a href=\"https:\/\/d3js.org\/\" rel=\"nofollow noopener noreferrer\">D3.js<\/a>.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/_f\/y6\/kf\/_fy6kfr0z_usbzy-xsjmxuu47bw.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/_f\/y6\/kf\/_fy6kfr0z_usbzy-xsjmxuu47bw.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u041e\u0447\u0435\u043d\u044c \u043c\u043e\u0434\u043d\u0430\u044f \u0448\u0442\u0443\u043a\u0430 \u0431\u044b\u043b\u0430 \u043a\u043e\u0433\u0434\u0430-\u0442\u043e, \u043f\u0440\u043e \u043d\u0435\u0435 \u043d\u0430 \u0432\u0441\u0435\u0445 \u0441\u043e\u0431\u0435\u0441\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f\u0445 \u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u043b\u0438. \u042d\u0442\u043e\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u2014 \u0434\u043b\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0430\u043d\u043d\u044b\u0445. \u0421\u0445\u043e\u0436\u0438\u0435 \u043f\u043e \u0438\u0434\u0435\u043e\u043b\u043e\u0433\u0438\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0435\u0441\u0442\u044c \u0438 \u0434\u043b\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u0437\u0430\u0434\u0430\u0447, \u043d\u043e \u044d\u0442\u043e\u0442 \u0443 \u0432\u0441\u0435\u0445 \u043d\u0430 \u0441\u043b\u0443\u0445\u0443, \u0442\u0430\u043a \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u043c \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0435\u0433\u043e. \u041d\u0430\u0432\u0435\u0440\u043d\u043e\u0435 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0441\u0432\u0430\u043b\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0432 \u043e\u0434\u043d\u0443 \u043a\u0443\u0447\u0443, \u043d\u043e \u043d\u0430\u043c \u0443\u0434\u043e\u0431\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c, \u0447\u0442\u043e \u0441\u0443\u0442\u044c \u0432\u0441\u0435\u0445 \u044d\u0442\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u044d\u0442\u043e \u043a\u043e\u043c\u0431\u0430\u0439\u043d\u044b, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043e\u0431\u0440\u0430\u043b\u0438 \u0432\u0441\u0435, \u0447\u0442\u043e \u0432 \u0442\u0435\u043e\u0440\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0432 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0443\u0437\u043a\u043e\u0439 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u043f\u043b\u0430\u043d\u0435 \u0437\u0430\u0434\u0430\u0447. \u0415\u0441\u043b\u0438 \u043d\u0430\u0448\u0438 \u0437\u0430\u0434\u0430\u0447\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u044d\u0442\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435, \u0442\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u043c \u0432\u044b\u0431\u043e\u0440\u043e\u043c. \u0422\u0430\u043c \u0435\u0441\u0442\u044c \u043a\u0443\u0447\u0430 \u0448\u0442\u0443\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b. \u0418 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0442\u043e\u0436\u0435 \u0435\u0441\u0442\u044c \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438. \u0423\u0434\u043e\u0431\u043d\u043e. \u041d\u043e \u0435\u0441\u043b\u0438 \u043d\u0430\u0448\u0438 \u0437\u0430\u0434\u0430\u0447\u0438 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u044d\u0442\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u2014 \u0442\u043e\u2026 \u041d\u0443 \u0442\u0430\u043a\u043e\u0435. \u0415\u0441\u043b\u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c \u0438 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0432 \u0442\u043e\u043c \u0436\u0435 GSAP \u0438 \u0432 D3.js, \u0442\u043e \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043c\u0435\u0442\u043d\u0430. \u0412\u0441\u0435 \u0436\u0435 \u0435\u0441\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430 \u044d\u0442\u043e\u043c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f, \u0430 \u0435\u0441\u0442\u044c \u0442\u0435, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u2014 \u044d\u0442\u043e \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b.<\/p>\n<p>  <\/p>\n<blockquote><p>\u041d\u043e \u0432\u0441\u0435 \u0436\u0435 \u044f \u0431\u044b \u043e\u0442 \u0441\u0435\u0431\u044f \u0441\u043a\u0430\u0437\u0430\u043b, \u0447\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 D3.js \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u0430 \u043a \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u043b\u0435\u043d\u0438\u044e, \u0442.\u043a. \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u0446\u0435\u043b\u0430\u044f \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f \u0434\u043e\u0431\u0440\u043e\u0442\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043d\u0430\u0443\u0447\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445. \u0421\u0430\u043c\u0430 \u043f\u043e \u0441\u0435\u0431\u0435 \u043e\u043d\u0430 \u043a\u0430\u043a \u0431\u044b \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u0430, \u043d\u043e \u044d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u043e\u0433\u0434\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0441\u0442\u043e\u0438\u0442 \u0432\u0437\u044f\u0442\u044c \u0440\u0430\u0434\u0438 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0441 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043a\u0430\u043a\u0430\u044f-\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438.<\/p><\/blockquote>\n<p>\u041a\u0430\u043a-\u0442\u043e \u0442\u0430\u043a. \u041c\u043e\u0436\u043d\u043e \u043a\u0440\u0430\u0442\u043a\u043e \u043f\u043e\u0434\u044b\u0442\u043e\u0436\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0448\u0430\u0442\u044c \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c JS, \u0434\u043b\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u2014 \u0435\u0441\u0442\u044c \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0432\u0441\u0435\u0433\u043e \u0438 \u0432\u0441\u044f. \u0414\u0438\u043d\u043e\u0437\u0430\u0432\u0440\u044b \u2014 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u043e\u0434 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u043c, \u043d\u043e \u0441\u043a\u043e\u0440\u0435\u0435 \u043d\u0435\u0442. \u0421\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043c\u0435\u044e\u0442 \u0447\u0442\u043e-\u0442\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u043c\u0438\u043c\u043e \u0441\u0432\u043e\u0435\u0433\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u2014 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u043e \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u043d\u043e \u043e\u0442\u0434\u0430\u0435\u043c \u0441\u0435\u0431\u0435 \u043e\u0442\u0447\u0435\u0442, \u0447\u0442\u043e \u043d\u0435\u043b\u044c\u0437\u044f \u0432\u0441\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u043e \u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u0410 \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u044c \u0442\u0435\u043c\u0443 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u0433\u0440\u0443\u0431\u044b\u043c, \u043d\u043e \u0432\u0430\u0436\u043d\u044b\u043c \u043c\u043e\u043c\u0435\u043d\u0442\u043e\u043c, \u043f\u0440\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0447\u0430\u0441\u0442\u043e \u0443\u043c\u0430\u043b\u0447\u0438\u0432\u0430\u044e\u0442 \u043c\u0430\u0440\u043a\u0435\u0442\u043e\u043b\u043e\u0433\u0438 \u0438 \u0435\u0432\u0430\u043d\u0433\u0435\u043b\u0438\u0441\u0442\u044b:<\/p>\n<p>  <\/p>\n<blockquote><p>\u041d\u0438\u043a\u0430\u043a\u0438\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u043d\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u044e\u0442 \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0430 SVG. \u041d\u0438\u043a\u0430\u043a. \u041e\u043d\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u043e \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0442 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043a\u0440\u043e\u0441\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0441\u0442\u0438. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0435\u0441\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u044b \u0434\u043b\u044f \u0447\u0435\u0433\u043e-\u043d\u0438\u0431\u0443\u0434\u044c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0432\u0437\u044f\u0442\u044c \u0438 \u043f\u043e\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. \u042d\u0442\u043e \u0443\u0434\u043e\u0431\u043d\u043e. \u041d\u043e \u0441\u0430\u043c \u0444\u043e\u0440\u043c\u0430\u0442 SVG \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u0438 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0435\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c \u043d\u0435 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f. \u042d\u0442\u043e \u0432\u0430\u0436\u043d\u043e \u043e\u0441\u043e\u0437\u043d\u0430\u0432\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433\u043e\u0432\u0443\u044e \u0444\u0438\u0433\u043d\u044e. \u0417\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u0432 \u0440\u0435\u043a\u043b\u0430\u043c\u0435 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 SVG, \u043f\u0440\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u0434\u043a\u043e \u0432\u0441\u043f\u043e\u043c\u0438\u043d\u0430\u044e\u0442, \u0432\u044b\u0434\u0430\u044e\u0442\u0441\u044f \u0437\u0430 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0447\u0443\u0434\u0435\u0441\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0412\u0441\u0435\u0433\u0434\u0430 \u0434\u0443\u043c\u0430\u0439\u0442\u0435 \u0441\u0432\u043e\u0435\u0439 \u0433\u043e\u043b\u043e\u0432\u043e\u0439!<\/p><\/blockquote>\n<p>  <\/p>\n<h2 id=\"krossbrauzernost-svg-animaciy\">\u041a\u0440\u043e\u0441\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0441\u0442\u044c SVG-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439<\/h2>\n<p>  <\/p>\n<p>\u0420\u0430\u0437 \u0443\u0436 \u043c\u044b \u043e\u0442\u043c\u0435\u0447\u0430\u043b\u0438 \u0441\u043b\u043e\u0432\u043e &#171;\u043a\u0440\u043e\u0441\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0441\u0442\u044c&#187; \u0443\u0436\u0435 \u043d\u0435 \u0440\u0430\u0437, \u0441\u0442\u043e\u0438\u0442 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0435\u0439 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435. \u0412 2022 \u0433\u043e\u0434\u0443 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043a\u0440\u043e\u0441\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0441\u0442\u0438 \u0432\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435 \u0443\u0436\u0435 \u043d\u0435 \u0441\u0442\u043e\u044f\u0442 \u0442\u0430\u043a \u043e\u0441\u0442\u0440\u043e, \u043a\u0430\u043a \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0432 2012, \u043d\u043e \u0432\u0441\u0435 \u0436\u0435 \u0435\u0441\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u0441\u0442\u044b\u043a\u043e\u0432\u043a\u0438.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043f\u043b\u0430\u043d\u0435 CSS \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435 \u043e\u043a. \u0411\u044b\u0432\u0430\u044e\u0442 \u0431\u0430\u0433\u0438, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u043e\u043c, \u043d\u043e \u043e\u043d\u0438 \u043e\u0431\u044b\u0447\u043d\u043e \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u043c\u0438 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0438 \u0441\u043a\u043e\u0440\u0435\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0441 \u0441\u0430\u043c\u0438\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u043c SVG, \u0447\u0435\u043c \u0441\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432. \u041e\u043d\u0438 \u0432\u043e \u043c\u043d\u043e\u0433\u043e\u043c \u043f\u043e\u0445\u043e\u0436\u0438 \u043d\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u0441 HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u041e\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439, \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0435 \u0441\u0433\u043b\u0430\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u2014 \u0432\u043e\u0442 \u044d\u0442\u0438 \u0448\u0442\u0443\u043a\u0438. \u0412 \u043f\u0435\u0440\u0432\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441 \u0434\u0435\u0432\u0443\u0448\u043a\u043e\u0439 \u0432 \u0448\u043b\u044f\u043f\u0435 \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u043a\u043e\u0433\u043e \u0431\u0430\u0433\u0430 \u0441 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0430 \u0433\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u043a\u043e\u043d\u0442\u0443\u0440\u043e\u0432. \u042d\u0442\u043e \u043d\u0435 \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e\u0441\u0442\u044c, \u0442\u0430\u043a \u0437\u0430\u0434\u0443\u043c\u0430\u043d\u043e. \u0422\u0430\u043a\u0438\u0435 \u0431\u0430\u0433\u0438 \u0438 \u0431\u0435\u0437 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0443\u0442\u0430\u0435\u0442 \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0440\u0435\u0447\u0430\u0449\u0438\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u044b \u0434\u043b\u044f \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 SMIL \u0432\u0441\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0445\u0443\u0436\u0435. \u0414\u0430, IE \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u043b\u043e\u0434\u0435\u0446, \u043d\u043e \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f SMIL \u043d\u0435 \u043e\u0441\u043e\u0431\u043e \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u0434\u0435\u043b\u043e \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u043d\u0435\u0441\u0442\u044b\u043a\u043e\u0432\u043a\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u0442\u0430\u043c \u0438\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043b\u043e\u0436\u0438\u043b\u0438\u0441\u044c. \u0418\u043d\u043e\u0433\u0434\u0430 \u0447\u0442\u043e-\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u043e\u0434\u043d\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043d\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0434\u0440\u0443\u0433\u043e\u043c. \u041f\u0440\u0438\u0447\u0435\u043c \u0442\u043e \u0438 \u0434\u0435\u043b\u043e \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0442 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043d\u043e\u0432\u044b\u0435 \u043d\u0435\u0441\u0442\u044b\u043a\u043e\u0432\u043a\u0438, \u043a\u043e\u0433\u0434\u0430 \u043a\u0430\u043a\u0430\u044f-\u0442\u043e \u043d\u043e\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u0441\u043d\u0430\u0440\u0443\u0436\u0438 SVG \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u043e\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438. \u0424\u043b\u0435\u043a\u0441\u044b \u0438 \u0433\u0440\u0438\u0434\u044b \u043c\u043e\u0433\u0443\u0442 \u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0435\u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u0435 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u0438 \u0444\u0438\u0447 \u0438 \u0431\u0430\u0433\u043e\u0432, \u043b\u043e\u043c\u0430\u044e\u0449\u0438\u0445 SVG. \u0412 \u0446\u0435\u043b\u043e\u043c \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c SMIL-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441\u0440\u0430\u0437\u0443 \u0432 Firefox, \u0434\u0432\u0438\u0433\u0430\u044f\u0441\u044c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u0448\u0430\u0433\u0430\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c, \u043d\u0430 \u043a\u0430\u043a\u043e\u043c \u043c\u043e\u043c\u0435\u043d\u0442\u0435 \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0448\u043b\u043e \u043d\u0435 \u0442\u0430\u043a. \u0412 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u0442\u043e, \u0447\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u0430\u043c, \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0438 \u0432 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u041d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0441\u0442\u043e\u0438\u0442 \u0432\u0435\u0437\u0434\u0435. \u042d\u0442\u043e \u043d\u0435 \u0442\u043e \u043c\u0435\u0441\u0442\u043e, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u0447\u0442\u043e-\u0442\u043e \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u0442\u044c \u043d\u0435 \u0433\u043b\u044f\u0434\u044f.<\/p>\n<p>  <\/p>\n<p>\u0421 JS \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e: \u0432\u0441\u0435 \u043e\u043a. \u0427\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 \u2014 \u0442\u043e \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438. \u0411\u044b\u043b\u043e \u0431\u044b \u0441\u0442\u0440\u0430\u043d\u043d\u043e, \u0435\u0441\u043b\u0438 \u0431\u044b \u0431\u044b\u043b\u043e \u043f\u043e-\u0434\u0440\u0443\u0433\u043e\u043c\u0443.<\/p>\n<p>  <\/p>\n<h2 id=\"voprosy-proizvoditelnosti\">\u0412\u043e\u043f\u0440\u043e\u0441\u044b \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/h2>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043d\u0435\u043b\u044e\u0431\u0438\u043c\u044b\u0445 \u0442\u0435\u043c \u0443 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440\u043e\u0432, \u0434\u0430? \u0425\u0443\u0436\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c. \u041d\u043e \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c. \u0412 \u0446\u0435\u043b\u043e\u043c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e SVG-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043f\u043e\u0445\u043e\u0436\u0430 \u043d\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0449\u0435\u0435 \u0432 \u043c\u0438\u0440\u0435 HTML+CSS, \u0437\u043d\u0430\u043a\u043e\u043c\u043e\u043c \u043b\u044e\u0431\u043e\u043c\u0443 \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u0443.<\/p>\n<p>  <\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c 4 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043c\u043e\u043c\u0435\u043d\u0442\u0430, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435:<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438: \u0447\u0435\u043c \u0438\u0445 \u0431\u043e\u043b\u044c\u0448\u0435, \u0442\u0435\u043c \u0441\u0438\u043b\u044c\u043d\u0435\u0435 \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442\u044c. \u041d\u0438\u0447\u0435\u0433\u043e \u043d\u043e\u0432\u043e\u0433\u043e. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0437\u0430\u0447\u0435\u043c-\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c 100000 \u043f\u043e\u0441\u0442\u0430\u043c\u0430\u0442\u043e\u0432 \u043d\u0430 SVG \u043a\u0430\u0440\u0442\u0435 \u2014 \u0434\u0443\u043c\u0430\u0439\u0442\u0435 \u043f\u0440\u043e \u043a\u043b\u0430\u0441\u0442\u0435\u0440\u0438\u0437\u0430\u0446\u0438\u044e. \u042d\u0442\u043e \u0435\u0449\u0435 \u0438 \u043d\u0430 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0445\u043e\u0440\u043e\u0448\u043e \u0441\u043a\u0430\u0436\u0435\u0442\u0441\u044f.<\/li>\n<li>\u0420\u0430\u0437\u043c\u0435\u0440 SVG \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435: \u0447\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043c\u0435\u0441\u0442\u0430 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 SVG, \u0447\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0435\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c. \u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441 CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0438 \u0432\u0441\u0435 \u0442\u0430\u043a \u0436\u0435.<\/li>\n<li>\u041c\u0430\u0441\u043a\u0438: \u043e\u0434\u043d\u0430 \u043c\u0430\u0441\u043a\u0430 \u043d\u0435 \u043e\u043a\u0430\u0436\u0435\u0442 \u0441\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u043b\u0438\u044f\u043d\u0438\u044f \u043d\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e, \u043d\u043e \u0435\u0441\u043b\u0438 \u0438\u0445 \u0431\u0443\u0434\u0435\u0442 \u043c\u043d\u043e\u0433\u043e, \u0442\u043e \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043d\u0430 \u0436\u0435\u043b\u0435\u0437\u043e \u043d\u0430\u0447\u043d\u0435\u0442 \u0440\u0430\u0441\u0442\u0438. \u0422\u0443\u0442 \u043c\u044b, \u0432\u0438\u0434\u0438\u043c\u043e, \u0432\u0441\u0442\u0443\u043f\u0430\u0435\u043c \u043d\u0430 \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u0441\u043a\u043e\u043b\u044c\u0437\u043a\u0443\u044e \u0434\u043e\u0440\u043e\u0436\u043a\u0443 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0445 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043c\u0430\u0441\u043e\u043a \u0432\u043b\u0438\u044f\u0435\u0442 \u044f\u0432\u043d\u043e \u0441\u0438\u043b\u044c\u043d\u0435\u0435, \u0447\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u043c\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043d\u043e \u0441\u0442\u0435\u043f\u0435\u043d\u044c \u0432\u043b\u0438\u044f\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0430\u0442\u044c. \u041e\u043d\u0430 \u044f\u0432\u043d\u043e \u043d\u0435 \u043b\u0438\u043d\u0435\u0439\u043d\u0430\u044f. \u041d\u0443\u0436\u043d\u043e \u0432\u0441\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u0432 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u0445.<\/li>\n<li>\u0424\u0438\u043b\u044c\u0442\u0440\u044b: \u0442\u0443\u0442 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u044b\u043c. \u0415\u0441\u043b\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u044b, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 \u0446\u0432\u0435\u0442\u0430\u043c\u0438, \u043d\u0435 \u043e\u043a\u0430\u0436\u0443\u0442 \u0441\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u043b\u0438\u044f\u043d\u0438\u044f, \u0442\u043e \u0448\u0442\u0443\u043a\u0438, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0435 \u0441 blur \u0438 \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u0440\u043e\u0434\u0430 displacement map \u043c\u043e\u0433\u0443\u0442 \u0443\u0431\u0438\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e. \u041f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442, \u043c\u044b \u0443\u0436\u0435 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u043b\u0438 \u0432 <a href=\"https:\/\/habr.com\/ru\/post\/520078\/\">\u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u0440\u043e \u043c\u0430\u0442\u0440\u0438\u0446\u044b<\/a> \u0438\u0437 \u0441\u0435\u0440\u0438\u0438 &#171;\u041c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0430 \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u0443 \u043d\u0435 \u043d\u0443\u0436\u043d\u0430&#187;. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043a\u0430\u043a \u044d\u0442\u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442, \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u043e\u043d\u0438 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u2014 \u043f\u043e\u043b\u0438\u0441\u0442\u0430\u0439\u0442\u0435 \u043d\u0430 \u0434\u043e\u0441\u0443\u0433\u0435.<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u043e\u0431\u044b\u0447\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u0447\u0442\u043e-\u0442\u043e \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0435. \u041e\u0431\u044b\u0447\u043d\u043e \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e &#171;\u0442\u044f\u0436\u0435\u043b\u044b\u0445&#187; SVG-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u0443\u0436\u0435 \u0438\u0434\u0443\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u043f\u0443\u0449\u0435\u043d\u043d\u044b\u0435 \u043a\u0430\u0434\u0440\u044b, \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u043c\u043d\u043e\u0433\u043e \u0447\u0435\u0433\u043e \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043f\u0440\u043e GPU, \u043d\u043e \u0442\u0430\u043c \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u043e \u043d\u0435\u0442 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u044f\u0432\u043d\u044b\u0445 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0439 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/jj\/kc\/hl\/jjkchlgpun023eyber16weyyvlo.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/jj\/kc\/hl\/jjkchlgpun023eyber16weyyvlo.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u0410 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0442\u044b\u043a\u0430\u0442\u044c \u043e\u0441\u043e\u0431\u043e \u0438 \u0438 \u043d\u0435\u043a\u0443\u0434\u0430. \u041f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0438\u043d\u0442\u0443\u0438\u0446\u0438\u044e \u0438 \u0437\u043d\u0430\u043d\u0438\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u0438\u0435 \u0448\u0442\u0443\u043a\u0438 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043c\u043e\u0449\u043d\u043e\u0441\u0442\u0435\u0439 \u043f\u0440\u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435. \u042d\u0442\u043e \u0442\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 \u0441\u043b\u0443\u0447\u0430\u0439, \u043a\u043e\u0433\u0434\u0430 \u0437\u043d\u0430\u043d\u0438\u044f \u0438\u0437 \u043c\u0438\u0440\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u043d\u0443\u0436\u043d\u044b \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440\u0443, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442.<\/p>\n<p>  <\/p>\n<blockquote><p>\u041a \u0441\u043b\u043e\u0432\u0443 \u043f\u0440\u043e GPU: \u0432 \u0441\u0435\u0442\u0438 \u0447\u0430\u0441\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u044c \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u0435, \u0447\u0442\u043e SVG-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e CPU, \u0430 canvas \u2014 \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e GPU. \u0418 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 canvas \u043f\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432\u044b\u0438\u0433\u0440\u044b\u0432\u0430\u0435\u0442. \u041d\u043e \u043d\u0435\u0442\u0440\u0443\u0434\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u0442\u0430\u043a. GPU \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0438 \u0441 SVG.<\/p><\/blockquote>\n<p>\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0441\u0442\u043e\u0438\u0442 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u0441\u0432\u0435\u0442\u043b\u043e\u0435 \u0431\u0443\u0434\u0443\u0449\u0435\u0435 \u0435\u0449\u0435 \u043d\u0435 \u043d\u0430\u0441\u0442\u0443\u043f\u0438\u043b\u043e \u043d\u0430 \u0440\u044b\u043d\u043a\u0435 \u0432 \u0446\u0435\u043b\u043e\u043c. \u0423 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043a\u043e\u0433\u043d\u0438\u0442\u0438\u0432\u043d\u043e\u0435 \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u0438\u0435, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0443 \u043d\u0438\u0445 \u0442\u043e\u043f\u043e\u0432\u044b\u0439 i7 \u0438 \u0432\u0438\u0434\u0435\u043e\u043a\u0430\u0440\u0442\u0430 \u043d\u0430 8GB \u0432\u0438\u0434\u0435\u043e\u043f\u0430\u043c\u044f\u0442\u0438, \u0442\u043e \u0438 \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0432\u0441\u0435 \u0442\u0430\u043a \u0436\u0435. \u0410 \u0443 \u043a\u043e\u0433\u043e \u043d\u0435 \u0442\u0430\u043a \u2014 \u0442\u043e\u0442 \u0438 \u043d\u0435 \u043d\u0443\u0436\u0435\u043d. \u041d\u0435\u043f\u043b\u0430\u0442\u0435\u0436\u0435\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b\u0439 \u043a\u043b\u0438\u0435\u043d\u0442\u044a, \u0442\u0430\u043a \u0441\u043a\u0430\u0437\u0430\u0442\u044c. \u0412 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432\u0441\u0435 \u043a\u0443\u0434\u0430 \u043f\u0440\u043e\u0437\u0430\u0438\u0447\u043d\u0435\u0435 \u2014 \u0438 \u0432 \u0431\u044e\u0434\u0436\u0435\u0442\u043d\u044b\u0445 \u043d\u043e\u0443\u0442\u0431\u0443\u043a\u0430\u0445, \u0438 \u0432 \u043c\u043e\u0434\u043d\u044b\u0445 \u0443\u043b\u044c\u0442\u0440\u0430\u0431\u0443\u043a\u0430\u0445 \u043c\u044b \u0447\u0430\u0441\u0442\u043e \u0431\u0443\u0434\u0435\u043c \u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0438\u0437\u043a\u043e\u0432\u043e\u043b\u044c\u0442\u043d\u044b\u0435 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u044b \u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0432\u0438\u0434\u0435\u043e\u043a\u0430\u0440\u0442\u044b \u0441 \u0441\u043e\u043c\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e. \u0418\u0445 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u043e\u0444\u0438\u0441\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b, \u043d\u043e \u043d\u0435 \u0434\u043b\u044f \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u0438\u0437 \u043c\u0438\u0440\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0438. \u0412\u0430\u0448\u0438 \u043c\u043e\u0434\u043d\u044b\u0435 \u043c\u0430\u043a\u0431\u0443\u043a\u0438 \u0442\u043e\u0436\u0435 \u0432\u0437\u043b\u0435\u0442\u0430\u044e\u0442 \u043e\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0430\u0439\u0442\u043e\u0432. \u0418 \u0446\u0435\u043d\u0430 \u0438\u043c \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442. \u041d\u0443 \u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u044b \u2014 \u044d\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u043f\u0435\u0441\u043d\u044f. \u0422\u0430\u043c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u2014 \u043f\u043e\u043d\u044f\u0442\u0438\u0435 \u0432 \u0446\u0435\u043b\u043e\u043c \u0440\u0430\u0441\u0442\u044f\u0436\u0438\u043c\u043e\u0435. \u0422\u0430\u043a \u0447\u0442\u043e \u043d\u0435 \u0437\u043b\u043e\u0443\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0439\u0442\u0435.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0432\u0441\u0435 \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043d\u0430\u0441 \u043a \u0442\u0430\u043a\u043e\u0439 \u043c\u044b\u0441\u043b\u0438, \u0447\u0442\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0440\u0430\u0437\u0443\u043c\u043d\u043e \u0434\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0434\u0435\u0440\u0436\u0430\u0442\u044c\u0441\u044f \u0437\u0430 SVG, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0437\u0430\u0434\u0430\u0447\u0430 \u043f\u043e\u043d\u0430\u0447\u0430\u043b\u0443 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u0439 \u043f\u043e\u0434 \u044d\u0442\u043e\u0442 \u0444\u043e\u0440\u043c\u0430\u0442. \u0418\u043d\u043e\u0433\u0434\u0430 \u0441\u0442\u043e\u0438\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0434\u0440\u0443\u0433\u043e\u0435 \u2014 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 WebGL, \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0432 \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0441\u0432\u043e\u0435\u043c \u0447\u0430\u0441\u0442\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0438 \u043d\u0430 \u044d\u0442\u043e\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0432 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0432\u044b\u0438\u0433\u0440\u044b\u0448 \u043f\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0438\u043b\u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u043e\u043e\u0431\u0449\u0435 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0432\u0441\u044e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043d\u0430 \u0432\u0438\u0434\u0435\u043e. \u0418\u043d\u043e\u0433\u0434\u0430 \u0434\u0430\u0436\u0435 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0447\u0435\u0440\u0435\u0437 lottie \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043d\u0430 2D-\u043a\u0430\u043d\u0432\u0430\u0441\u0435 \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0448\u0443\u0441\u0442\u0440\u0435\u0435, \u0447\u0435\u043c \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441 SVG. \u041e\u043f\u044f\u0442\u044c \u0436\u0435, \u0437\u0430 \u0441\u0447\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u043e\u0432 \u0434\u043b\u044f \u0447\u0430\u0441\u0442\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0448\u0442\u0443\u043a. \u0420\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0437\u0430\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0435 \u0432\u0438\u0434\u0435\u043e \u043d\u0435 \u0432\u0435\u0437\u0434\u0435 \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442, \u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043d\u0430 WebGL \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043d\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443, \u043d\u043e \u0435\u0441\u043b\u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0442\u043e \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0441\u043b\u0435\u043f\u043e \u0438\u0441\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u043a \u0440\u0435\u0448\u0435\u043d\u0438\u044e \u0437\u0430\u0434\u0430\u0447. \u0412 \u043a\u043e\u043d\u0446\u0435 \u043a\u043e\u043d\u0446\u043e\u0432, \u0435\u0441\u043b\u0438 \u0432\u0441\u0435 \u043b\u044e\u0442\u043e \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442, \u0434\u0435\u0434\u043b\u0430\u0439\u043d \u043d\u0430 \u043d\u043e\u0441\u0443, \u0430 \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u043d\u0438\u043a\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u043e\u0434, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0439\u0442\u0438 \u043f\u043e \u043f\u0443\u0442\u0438 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e\u0439 \u0434\u0435\u0433\u0440\u0430\u0434\u0430\u0446\u0438\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. \u0422\u043e\u043b\u044c\u043a\u043e \u043f\u043b\u0430\u043d\u043a\u0443 \u043f\u043e\u0434\u043d\u044f\u0442\u044c, \u0438 \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432\u0441\u0435 \u0442\u044f\u0436\u0435\u043b\u044b\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u044b \u0432\u043e\u043e\u0431\u0449\u0435 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439. \u041f\u0440\u043e \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u0438\u043d\u044f\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c, \u043d\u043e \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043b\u0443\u0447\u0448\u0435 \u0438\u043c\u0435\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0439, \u043d\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u0447\u0435\u043c \u0442\u043e\u0440\u043c\u043e\u0437\u044f\u0449\u0443\u044e \u043a\u0440\u0430\u0441\u043e\u0442\u0443.<\/p>\n<p>  <\/p>\n<h2 id=\"podgotovka-svg-ot-dizaynera-k-animirovaniyu\">\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 SVG \u043e\u0442 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430 \u043a \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e<\/h2>\n<p>  <\/p>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u043d\u0430\u0432\u044b\u043a\u043e\u0432 \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 SVG-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0438 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043d\u0430\u0432\u044b\u043a\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u043c\u0438 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430\u043c\u0438. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0441\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442 \u0438 \u043f\u0440\u0438\u043d\u0435\u0441\u0435\u0442 \u043d\u0430 \u0431\u043b\u044e\u0434\u0435\u0447\u043a\u0435, \u0430 \u0435\u0449\u0435 \u043b\u0443\u0447\u0448\u0435, \u0435\u0441\u043b\u0438 \u0441\u0430\u043c \u0437\u0430\u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u0442 \u2014 \u044d\u0442\u043e \u043a\u0440\u0443\u0442\u043e. \u041d\u043e \u043d\u0435 \u0443 \u0432\u0441\u0435\u0445 \u043e\u043d \u0435\u0441\u0442\u044c. \u0410 \u0435\u0441\u043b\u0438 \u0438 \u0435\u0441\u0442\u044c, \u0442\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u043d \u0441\u0432\u043e\u0431\u043e\u0434\u0435\u043d. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0432\u0435\u0449\u0438 \u043d\u0443\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u043c\u0443. \u0418 \u043f\u0440\u0435\u0436\u0434\u0435, \u0447\u0435\u043c \u0431\u0440\u043e\u0441\u0430\u0442\u044c\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u044c CSS\/JS\/SMIL-\u043a\u043e\u0434, \u0431\u044b\u043b\u043e \u0431\u044b \u0445\u043e\u0440\u043e\u0448\u043e \u043d\u0430\u0432\u0435\u0441\u0442\u0438 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432 \u0444\u0430\u0439\u043b\u0430\u0445. \u0427\u0438\u0441\u0442\u044b\u0439 \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u043c\u043e\u0436\u0435\u0442 \u0438 \u0432\u0440\u0435\u043c\u044f \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c, \u0438 \u043d\u0435\u0440\u0432\u044b.<\/p>\n<p>  <\/p>\n<p>\u041e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u0432 \u0444\u0430\u0439\u043b\u0430\u0445 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e\u0442 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430, \u0432\u0440\u043e\u0434\u0435 \u0442\u0430\u043a\u043e\u0439:<\/p>\n<p>  <\/p>\n<pre><code class=\"xml\">&lt;!-- Created with Inkscape (http:\/\/www.inkscape.org\/) --> &lt;svg    xmlns:dc=\"http:\/\/purl.org\/dc\/elements\/1.1\/\"    xmlns:cc=\"http:\/\/creativecommons.org\/ns#\"    xmlns:rdf=\"http:\/\/www.w3.org\/1999\/02\/22-rdf-syntax-ns#\"    xmlns:svg=\"http:\/\/www.w3.org\/2000\/svg\"    xmlns=\"http:\/\/www.w3.org\/2000\/svg\"    xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"    xmlns:sodipodi=\"http:\/\/sodipodi.sourceforge.net\/DTD\/sodipodi-0.dtd\"    xmlns:inkscape=\"http:\/\/www.inkscape.org\/namespaces\/inkscape\"    inkscape:version=\"0.48.2 r9819\"    sodipodi:docname=\"gears.svg\">   &lt;sodipodi:namedview      objecttolerance=\"10\"      gridtolerance=\"10\"      guidetolerance=\"10\"      inkscape:window-width=\"1739\"      inkscape:window-height=\"838\"<\/code><\/pre>\n<p>  <\/p>\n<p>\u041e\u043d\u0430 \u043d\u0435 \u043d\u0443\u0436\u043d\u0430 \u0434\u043b\u044f \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f SVG \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u044b\u043b\u043e \u0431\u044b \u0445\u043e\u0440\u043e\u0448\u043e \u0435\u0435 \u0441\u0440\u0430\u0437\u0443 \u0443\u0431\u0440\u0430\u0442\u044c. \u0418\u043b\u0438 \u0432\u043e\u0442 \u0435\u0449\u0435 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b:<\/p>\n<p>  <\/p>\n<pre><code class=\"xml\">&lt;path id='path5395' d='m809.53 158.72c-19.34-0.19-38.91-0.09-58.47 0.25-78.23 1.37-156.08 6.92-218.18 16.41-31.06 4.74-58.12 10.39-79.97 17.43-20.77 5.39-38.86 13.67-51.35 30.97-25.08 34.76-48.42 91.02-66.37 147.1-17.96 56.07-30.35 110.6-21.41 152.31 4.73 22.05 19.01 38.78 34.94 48.5 15.93 9.71 33.16 14.12 49.25 17.65 16.09 3.54 31.3 6.12 42.19 9.47s15.63 7.1 16.81 9.03c0.09 0.15 0.18 0.3 0.28 0.44 8.26 12.98 17.32 43.93 23.87 75.19 6.56 31.26 11.38 62.63 18.07 84.69 5.08 16.76 16.86 22.09 27.9 27.25 11.04 5.15 23.97 9.13 38.82 12.81 29.69 7.36 66.87 13.14 104.5 17.9 37.62 4.77 75.59 8.44 105.93 11.13 30.35 2.69 54.29 4.58 59.32 5.19h0.09c14.45 1.66 24.62-6.48 30.84-13.22 6.23-6.74 10.78-14.27 15.35-22.75 9.14-16.96 17.67-37.88 26.4-58.63 8.74-20.74 17.67-41.25 25.78-55.43 4.06-7.09 7.98-12.55 10.57-15.25 1.11-1.17 1.59-1.41 1.78-1.54 19.75-1.83 54.93-5.71 89.63-11.4 17.9-2.92 35.3-6.31 50.5-10.22s27.4-7.19 39-15.44c8-5.69 9.9-11.14 12.1-16.22 2.1-5.07 3.5-10.3 4.9-16.18 2.7-11.78 4.7-26.13 6.2-42.85 3.1-33.44 4.3-76.11 3-120.59-1.2-44.48-4.8-90.63-11.6-130.91-6.7-39-15.1-72.03-32-95.84-0.5-0.8-1-1.57-1.5-2.31-0.1-0.04-0.1-0.07-0.1-0.1 0-0.05-0.1-0.1-0.1-0.15v-0.03c-0.7-0.84-1.4-1.64-2.1-2.38-12.6-14.8-30.1-21.22-51.6-27.53-22.6-6.66-50.3-11.62-81.92-15.44-47.39-5.72-103.34-8.74-161.35-9.31zm-0.44 45.69c56.76 0.57 111.31 3.5 156.32 8.93 30 3.63 55.79 8.43 74.59 13.94 18.6 5.46 29.6 13.2 30.2 13.84 8.1 10.91 18.6 41.2 24.9 78.35 6.3 37.2 9.9 81.65 11.1 124.5s0 84.21-2.9 115.12c-1.4 15.46-3.3 28.37-5.2 36.88-0.7 3.25-0.7 5.68-2 6.69-2.6 2.12-10.5 4.44-20.9 7.12-13 3.36-29.5 6.59-46.4 9.38-34.03 5.57-70.32 9.52-88.61 11.18-12.86 1.17-21.76 8.2-28.5 15.25-6.74 7.06-12.09 15.17-17.22 24.13-10.26 17.92-19.37 39.48-28.19 60.4-8.81 20.93-17.33 41.26-24.56 54.69-2.97 5.51-5.59 9.32-7.41 11.66-10.56-1.08-27.2-2.32-53.93-4.69-30.05-2.66-67.51-6.29-104.22-10.94-36.72-4.65-72.84-10.42-99.25-16.96-13.21-3.28-24.05-6.85-30.47-9.85-2.66-1.24-3.91-2.4-4.53-3-4.52-16.6-9.7-46.44-16.1-76.94-6.85-32.66-14.32-65.65-30.03-90.34-10.24-16.9-26.78-23.85-42.22-28.59-15.43-4.75-31.33-7.24-45.78-10.41s-27.17-7.12-35.28-12.06c-8.11-4.95-11.94-9.15-14.06-19.07-4.76-22.21 3.39-76.16 20.25-128.81s41.3-106.36 60.87-135.72c-0.75 1.11 9.26-6.98 27.35-12.81 18.08-5.83 43.3-11.27 72.84-15.78 59.07-9.02 135.54-14.53 212.13-15.88 19.14-0.33 38.29-0.4 57.21-0.21z'\/><\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u044b \u0443\u0436\u0435 \u0434\u043e\u0433\u0430\u0434\u0430\u043b\u0438\u0441\u044c, \u043a\u0430\u043a\u043e\u0439 \u0444\u043e\u0440\u043c\u044b \u044d\u0442\u043e\u0442 path? \u0427\u0442\u043e \u0442\u0443\u0442 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u043e. \u041d\u0443 \u0445\u043e\u0442\u044f \u0431\u044b \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e?<\/p>\n<p>  <\/p>\n<p>\u041d\u0435\u0442? \u041d\u0443 \u043d\u0438\u0447\u0435\u0433\u043e. \u041d\u0435 \u0432\u0441\u0435 \u0441\u0440\u0430\u0437\u0443. \u041f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u0440\u0435\u0448\u0430\u0435\u0442. \u041d\u0443 \u0430 \u0435\u0441\u043b\u0438 \u0432\u0430\u0448\u0430 \u0438\u043d\u0442\u0443\u0438\u0446\u0438\u044f \u0432\u0430\u0441 \u043f\u043e\u0434\u0432\u043e\u0434\u0438\u0442, \u0438\u043b\u0438 \u0432\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u0432\u0435\u0447\u043d\u043e \u0438\u0433\u0440\u0430\u0442\u044c \u0432 \u0443\u0433\u0430\u0434\u0430\u0439\u043a\u0443, \u0442\u043e SVG \u0432\u0441\u0435 \u0436\u0435 \u0441\u0442\u043e\u0438\u0442 \u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0434 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0441\u0442\u0440\u0430\u0448\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 SVG \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u0435 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u044b. \u0421\u0442\u0440\u0430\u043d\u043d\u043e, \u043d\u043e \u043c\u043d\u043e\u0433\u0438\u0435 \u043c\u0438\u0434\u043b+ \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0432 \u043c\u043e\u0434\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f\u0445 \u043d\u0435 \u0443\u043c\u0435\u044e\u0442 \u0441 \u043d\u0438\u043c\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u0418\u043b\u0438 \u0434\u0430\u0436\u0435 \u0431\u043e\u044f\u0442\u0441\u044f \u0438\u0445. \u0418\u043b\u0438, \u0447\u0442\u043e \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u0431\u044b\u043b\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435\u043c, \u043d\u0435 \u0437\u043d\u0430\u044e\u0442, \u0447\u0442\u043e \u044d\u0442\u043e \u0442\u0430\u043a\u043e\u0435. \u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0445 \u0435\u0449\u0435 \u043d\u0435 \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b\u0438 \u2014 \u0441\u0430\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u0439\u0442\u0438 \u0438 \u0441\u043a\u0430\u0447\u0430\u0442\u044c \u0441\u0435\u0431\u0435 \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c. \u0412\u0441\u0435 \u0437\u043d\u0430\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e, \u043d\u043e \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043f\u0440\u0438\u0435\u043c\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0436\u0438\u0437\u043d\u044c \u0438 \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u043a\u0443\u0447\u0443 \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0415\u0441\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0442\u044b\u043a\u0430\u0442\u044c \u043c\u044b\u0448\u043a\u043e\u0439 \u043a\u0443\u0434\u0430 \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0447\u0435\u043c \u0447\u0442\u043e-\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0430\u0442\u044c \u0432 \u0441\u0443\u0440\u043e\u0432\u043e\u0439 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0441\u043a\u043e\u0439 IDE.<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0432 Inkscape, \u043d\u043e \u0432\u0441\u0435 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u0435 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u044b \u043f\u043e \u0441\u0443\u0442\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435 \u0432 \u0441\u0432\u043e\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u043e\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0435. \u041e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441 \u043e\u0434\u043d\u0438\u043c \u0438 \u0442\u0435\u043c \u0436\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u043c SVG, \u0438 \u043c\u044b \u0443\u0436\u0435 \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u043e\u043d \u0438 \u0432 \u0430\u0444\u0440\u0438\u043a\u0435 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f SVG.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0446\u0435\u043b\u043e\u043c \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043e\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/x5\/ww\/sa\/x5wwsave-y8kewvpj7i82rkqdz8.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/x5\/ww\/sa\/x5wwsave-y8kewvpj7i82rkqdz8.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u0435, \u0433\u0434\u0435 \u043c\u044b \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0432\u0438\u0434\u0438\u043c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0438 \u043c\u043e\u0436\u0435\u043c \u0442\u044b\u043a\u0430\u0442\u044c \u043c\u044b\u0448\u043a\u043e\u0439, \u0434\u0432\u0438\u0433\u0430\u0442\u044c, \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438.\u0442.\u0434. \u0415\u0441\u0442\u044c \u043f\u043e\u043b\u0435, \u0433\u0434\u0435 \u043c\u044b \u0432\u0438\u0434\u0438\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0442\u043e\u043c \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u0441\u044f \u0432 \u043a\u043e\u0434. \u041d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043d\u0435\u0439 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043c\u0443\u0441\u043e\u0440 \u0432 \u0432\u0438\u0434\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u0432, \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 id. \u042d\u0442\u043e \u043d\u0435\u0432\u0430\u0436\u043d\u043e, \u0432\u0441\u0435 \u043f\u043e\u0442\u043e\u043c \u043f\u043e\u0434\u0447\u0438\u0441\u0442\u0438\u0442\u0441\u044f. \u0418 \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u0435, \u043f\u0440\u044f\u043c\u043e \u043f\u043e\u0434 \u0434\u0435\u0440\u0435\u0432\u043e\u043c, \u0433\u0434\u0435 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u042d\u0442\u043e \u0442\u0440\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430, \u043a\u0443\u0434\u0430 \u043c\u044b \u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0435 \u043a \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e. \u0418 \u0435\u0441\u0442\u044c \u0440\u044f\u0434 \u0442\u0438\u043f\u043e\u0432\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0440\u043e\u0448\u043e \u0443\u043c\u0435\u0442\u044c \u0434\u0435\u043b\u0430\u0442\u044c. \u041c\u044b \u0438\u0445 \u043a\u0440\u0430\u0442\u043a\u043e \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u043a\u0443\u0434\u0430 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043a \u0432\u0430\u0448\u0435\u043c\u0443 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0443, \u0435\u0441\u043b\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c. \u041a\u043d\u043e\u043f\u043a\u0438 \u0432\u0435\u0437\u0434\u0435 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445, \u043d\u043e \u0441\u0443\u0442\u044c \u043e\u0434\u043d\u0430 \u0438 \u0442\u0430 \u0436\u0435.<\/p>\n<p>  <\/p>\n<h3 id=\"struktura-dokumenta\">\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430<\/h3>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0432\u0430\u044f \u0433\u0440\u0443\u043f\u043f\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 SVG. \u0421\u044e\u0434\u0430 \u0432\u043e\u0439\u0434\u0443\u0442 \u0442\u0430\u043a\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u043a\u0430\u043a \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0442\u0435\u0433\u0438 g, \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u043e \u043e\u0442 group, \u0438 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 \u0434\u043b\u044f \u043d\u0438\u0445.<\/p>\n<p>  <\/p>\n<p>\u0412 Inkscape \u043c\u043e\u0436\u043d\u043e \u0442\u044b\u043a\u0430\u0442\u044c \u043c\u044b\u0448\u043a\u043e\u0439 \u0441 Shift \u043f\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e, \u0432\u044b\u0434\u0435\u043b\u044f\u044f \u043c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0434\u0435\u043b\u0430\u0442\u044c Gtrl+G, \u0447\u0442\u043e\u0431\u044b \u0438\u0445 \u0431\u044b\u0441\u0442\u0440\u043e \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u0412 \u043c\u0435\u043d\u044e \u044d\u0442\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 Object > Group. \u0414\u0435\u0440\u0435\u0432\u043e \u0442\u0435\u0433\u043e\u0432 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 Ctrl+Shift+X \u0438\u043b\u0438 Edit > XML Editor, \u0435\u0441\u043b\u0438 \u0432\u044b \u0435\u0433\u043e \u0432\u0434\u0440\u0443\u0433 \u0437\u0430\u043a\u0440\u044b\u043b\u0438. \u0412 \u0442\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u0432\u0441\u0435 \u043b\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043b\u043e\u0441\u044c. \u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0443 \u0442\u0435\u0433\u043e\u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u0442\u0430\u043c \u0436\u0435:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/ko\/k-\/ix\/kok-ixcxl7_gsat-ul9_wltgqcs.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/ko\/k-\/ix\/kok-ixcxl7_gsat-ul9_wltgqcs.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043b\u0435\u0437\u043d\u043e \u0432\u0437\u044f\u0442\u044c \u043d\u0430 \u0437\u0430\u043c\u0435\u0442\u043a\u0443, \u0447\u0442\u043e \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 CSS\/JS \u0443\u0434\u043e\u0431\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 SVG. \u041d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e id. \u0423\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u0445\u043e\u0440\u043e\u0448\u0438 \u0434\u043b\u044f \u0441\u0441\u044b\u043b\u043e\u043a, \u043d\u043e \u043d\u0435 \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438. \u0415\u0441\u043b\u0438 \u0441\u0446\u0435\u043d\u0430 \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u2014 \u0434\u0443\u043c\u0430\u0439\u0442\u0435 \u043e \u0432\u0441\u0435\u0445 \u044d\u0442\u0438\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u0445, \u043a\u0430\u043a \u043e \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0445 \u0411\u042d\u041c-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043b\u043e\u0433\u0438\u043a\u0443 \u0432 \u0441\u0446\u0435\u043d\u0430\u0445 \u043f\u043e \u0442\u043e\u043c\u0443 \u0436\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0443. \u0418\u043d\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u0438\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c, \u043d\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u2014 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u043e-\u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c\u0438 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u043a\u043e\u0434\u0430. \u0421 \u0442\u0430\u043a\u0438\u043c\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u2014 \u043e\u0434\u043d\u043e \u0443\u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u0438\u0435.<\/p>\n<p>  <\/p>\n<h3 id=\"rabota-s-krivymi\">\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u043a\u0440\u0438\u0432\u044b\u043c\u0438<\/h3>\n<p>  <\/p>\n<p>\u0412\u0442\u043e\u0440\u0430\u044f \u0433\u0440\u0443\u043f\u043f\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u2014 \u044d\u0442\u0430 \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u043a\u0440\u0438\u0432\u044b\u043c\u0438. \u0422\u0443\u0442 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0435\u0449\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f:<\/p>\n<p>  <\/p>\n<ul>\n<li>\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u0440\u0438\u0432\u044b\u0445. \u0414\u0432\u0438\u0433\u0430\u0435\u043c \u0442\u043e\u0447\u043a\u0438 \u043c\u044b\u0448\u043a\u043e\u0439 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u043e\u0432\u044b\u0435 \u043a\u0440\u0438\u0432\u044b\u0435. \u042d\u0442\u043e \u043a\u0443\u0434\u0430 \u043f\u0440\u043e\u0449\u0435 \u0441\u0430\u043c\u043e\u043c\u0443 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c, \u0447\u0435\u043c \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043b\u043e\u0432\u0430\u043c\u0438.<\/li>\n<li>\u0421\u043c\u0435\u043d\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0443\u0440\u0430 \u0447\u0435\u0440\u0435\u0437 Path > Reverse. \u042d\u0442\u043e, \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u0447\u0442\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f &#171;\u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e&#187; \u0438 &#171;\u043d\u0430\u0440\u0443\u0436\u043d\u043e\u0441\u0442\u044c\u044e&#187; \u0443 \u0437\u0430\u043c\u043a\u043d\u0443\u0442\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0443\u0440\u0430, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u0445 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0438 \u043b\u0438\u043d\u0438\u0439.<\/li>\n<li>\u0417\u0430\u043b\u0438\u0432\u043a\u0430 \u0446\u0432\u0435\u0442\u043e\u043c. \u0417\u0430 \u044d\u0442\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 fill. \u0422\u0443\u0442 \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0435 \u043a\u043e\u043d\u0442\u0443\u0440\u044b \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043b\u0438\u0432\u0430\u0442\u044c \u043f\u043e\u0447\u0442\u0438 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u043e \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0441 \u043d\u0438\u043c\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0448\u0442\u0430\u0442\u043d\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0439 :hover.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u043c\u044b \u0435\u0449\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0437\u0430\u0447\u0435\u043c \u0432\u0441\u0435 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f.<\/p>\n<p>  <\/p>\n<h3 id=\"musor\">\u041c\u0443\u0441\u043e\u0440<\/h3>\n<p>  <\/p>\n<p>\u0418 \u0442\u0440\u0435\u0442\u044c\u044f \u0432\u0435\u0449\u044c, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0443\u0436\u043d\u0430 \u2014 \u044d\u0442\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 SVG \u0431\u0435\u0437 \u043c\u0443\u0441\u043e\u0440\u0430. \u0420\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u044b \u0447\u0430\u0441\u0442\u043e \u0438\u043c\u0435\u044e\u0442 \u043c\u043d\u043e\u0433\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u043d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443, \u0432\u0441\u0435 \u043d\u0435 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0438\u0442\u044c. \u041e\u0431\u044b\u0447\u043d\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u0431\u0440\u0430\u0442\u044c \u0432\u0441\u044e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u0441\u0430\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u043b, \u0432\u0441\u0435 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435, \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u044b\u043b \u0432\u044b\u0448\u0435. \u041d\u0430\u043c \u043e\u043d\u0438 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b. \u0415\u0449\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u0447\u0438\u0441\u0435\u043b \u0441 \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0435\u0439 \u0437\u0430\u043f\u044f\u0442\u043e\u0439, \u0437\u043d\u0430\u043a\u043e\u0432 \u0434\u043e \u0442\u0440\u0435\u0445, \u0447\u0442\u043e\u0431\u044b SVG \u0431\u044b\u043b\u0430 \u043c\u0435\u043d\u044c\u0448\u0435. \u041d\u043e \u0442\u0443\u0442 \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u043e \u2014 \u0438\u043d\u043e\u0433\u0434\u0430 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u043d\u0443\u0436\u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0435, \u0437\u043d\u0430\u043a\u043e\u0432 \u043f\u044f\u0442\u044c. \u042d\u0442\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0432\u044c\u044e\u043f\u043e\u0440\u0442\u0430 \u0438 \u0441\u0442\u0435\u043f\u0435\u043d\u0438 \u0434\u0435\u0442\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0441\u0442\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438. \u0418\u043d\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u043e\u043a\u0440\u0443\u0433\u043b\u0438\u0442\u044c \u0431\u0435\u0437 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u043e\u0432. \u0421\u0442\u043e\u0438\u0442 \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 id, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043c\u0435\u0448\u0430\u043b\u0438\u0441\u044c. \u041c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0443\u0434\u043e\u0431\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0432\u043e\u0438\u043c id \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043f\u0440\u0435\u0444\u0438\u043a\u0441 \u0438 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/zd\/j-\/ub\/zdj-ubymhb38r2gc35hn9mzk_6i.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/zd\/j-\/ub\/zdj-ubymhb38r2gc35hn9mzk_6i.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u0412 \u0446\u0435\u043b\u043e\u043c \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430\u0445 \u0442\u0430\u043c \u043c\u043d\u043e\u0433\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c. \u0421\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0442\u043e\u0447\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u043c \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u043c, \u0430 \u0442\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0447\u0430\u0442\u044c \u0442\u0432\u043e\u0440\u0438\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043d\u0435\u0432\u0440\u0430\u0437\u0443\u043c\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u0438\u043b\u0438 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0442\u044c \u043d\u0430\u0448\u0438 \u0437\u0430\u0431\u043e\u0442\u043b\u0438\u0432\u043e \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0433\u0440\u0443\u043f\u043f\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b\u0438, \u0438\u043b\u0438 \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 path, \u0438 \u043f\u043e\u0442\u043e\u043c \u0431\u0443\u0434\u0443\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0441\u043b\u0443\u0447\u0430\u0435 Inkscape \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u0439\u0442\u0438 \u0432 Edit > Preferences > Input\/Output > SVG Output \u0438 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0444\u043e\u0440\u043c\u0430\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0443\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c\u0441\u044f \u043a\u0440\u0438\u0432\u044b\u0435. \u041c\u043e\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0438\u043b\u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0442\u0430\u043c \u0432\u044b\u0431\u0440\u0430\u043d \u0437\u0430\u0433\u0430\u0434\u043e\u0447\u043d\u044b\u0439 optimized \u0444\u043e\u0440\u043c\u0430\u0442, \u043b\u043e\u0433\u0438\u043a\u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u044f \u0442\u0430\u043a \u0438 \u043d\u0435 \u043f\u043e\u043d\u044f\u043b) \u0438 \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0443\u0434\u0430\u043b\u044f\u044f. \u0412 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445 \u043d\u0430\u043c \u044d\u0442\u043e \u043d\u0435 \u0432\u0430\u0436\u043d\u043e, \u043d\u043e \u043f\u0440\u0438 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0435 \u043a\u043e\u043d\u0442\u0443\u0440\u043e\u0432 \u0434\u043b\u044f \u043c\u043e\u0440\u0444\u0438\u043d\u0433\u0430 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0447\u0435\u0442\u043a\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u043a\u0430\u043a\u0430\u044f \u0443 \u043d\u0438\u0445 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430, \u0438 \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0442\u044c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0443 \u0435\u0435 \u043c\u0435\u043d\u044f\u0442\u044c \u0440\u0430\u0434\u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0441\u0447\u0435\u0442\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0447\u0442\u043e-\u0442\u043e \u0442\u0430\u043a\u043e\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"xml\">&lt;svg version=\"1.0\" viewBox=\"0 0 600 480\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">   &lt;g id=\"skull\" fill=\"#ff214f\">     &lt;path id=\"skull-border\" d=\"...\"\/>     &lt;g id=\"mouth\">       &lt;path d=\"...\"\/>       &lt;path d=\"...\"\/>       &lt;path d=\"...\"\/>       &lt;path d=\"...\"\/>     &lt;\/g>     &lt;g id=\"eyes\">       &lt;path d=\"...\" fill-rule=\"evenodd\"\/>       &lt;path d=\"...\"\/>       &lt;path id=\"eye-left\" d=\"...\"\/>       &lt;path id=\"eye-right\" d=\"...\" fill-rule=\"evenodd\"\/>     &lt;\/g>     &lt;g id=\"nose\">       &lt;path d=\"...\" fill-rule=\"evenodd\"\/>       &lt;path d=\"...\"\/>     &lt;\/g>     &lt;g id=\"bones\">       &lt;path id=\"bone-bottom-right\" d=\"...\"\/>       &lt;path id=\"bone-bonnom-left\" d=\"...\"\/>       &lt;path id=\"bone-top-right\" d=\"...\"\/>       &lt;path id=\"bone-top-left\" d=\"...\"\/>     &lt;\/g>   &lt;\/g> &lt;\/svg><\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 d \u043f\u0440\u043e\u043f\u0443\u0449\u0435\u043d\u043e, \u0442\u0430\u043c \u043d\u0435\u0447\u0438\u0442\u0430\u0435\u043c\u044b\u0439 \u0445\u0430\u043e\u0441 \u0438\u0437 \u0446\u0438\u0444\u0440, \u043a\u0430\u043a \u0438 \u0440\u0430\u043d\u044c\u0448\u0435. \u041d\u043e \u0442\u0443\u0442 \u043d\u0435\u0442 \u043c\u0443\u0441\u043e\u0440\u0430, \u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c CSS \u0438 JS, \u0441\u0441\u044b\u043b\u0430\u044f\u0441\u044c \u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u0441\u0446\u0435\u043d\u0435 \u0438 \u043d\u0435 \u0443\u0433\u0430\u0434\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0447\u0442\u043e. \u0421 \u0442\u0430\u043a\u0438\u043c \u0444\u0430\u0439\u043b\u043e\u043c \u0443\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c.<\/p>\n<p>  <\/p>\n<h2 id=\"nekotorye-tehnicheskie-detali\">\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0434\u0435\u0442\u0430\u043b\u0438<\/h2>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438\u0441\u044c \u0441 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 \u043f\u043e\u0447\u0438\u0441\u0442\u0438\u043b\u0438 \u0441\u0432\u043e\u0438 SVG, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0448\u0442\u0443\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u0438, \u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0430\u043a \u0432\u0437\u044f\u0442\u044c \u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430 HTML+CSS. \u041a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430, \u0442\u0443\u0442 \u0435\u0441\u0442\u044c \u0432\u0435\u0449\u0438 \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u0435 \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440\u043e\u0432. \u0412\u043e\u0437\u043d\u0438\u043a\u0430\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b. \u0422\u0430\u043a \u0447\u0442\u043e \u043c\u044b \u0431\u0435\u0433\u043b\u043e \u043f\u0440\u043e\u0439\u0434\u0435\u043c\u0441\u044f \u043f\u043e \u0441\u0430\u043c\u044b\u043c \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c \u0438\u0437 \u043d\u0438\u0445, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u0432\u0435\u044f\u0442\u044c \u043c\u0430\u0433\u0438\u044e, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u043b\u0438, \u043e\u0442\u043a\u0443\u0434\u0430 \u0432\u0441\u0435 \u0431\u0435\u0440\u0435\u0442\u0441\u044f, \u0438 \u0447\u0442\u043e \u0433\u0443\u0433\u043b\u0438\u0442\u044c, \u0435\u0441\u043b\u0438 \u0447\u0442\u043e.<\/p>\n<p>  <\/p>\n<h3 id=\"morfing\">\u041c\u043e\u0440\u0444\u0438\u043d\u0433<\/h3>\n<p>  <\/p>\n<p>\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u043c\u0430\u0433\u0438\u044f \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u0445 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a. CSS \u0442\u0430\u043a \u043d\u0435 \u0443\u043c\u0435\u0435\u0442. \u0418\u0434\u0435\u044f \u043c\u043e\u0440\u0444\u0438\u043d\u0433\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u0431\u0435\u0440\u0435\u043c \u0434\u0432\u0430 path, \u0434\u0432\u0435 \u043a\u0440\u0438\u0432\u044b\u0445, \u0438 \u043f\u043b\u0430\u0432\u043d\u043e \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u043e\u0434\u043d\u0443 \u043a\u0440\u0438\u0432\u0443\u044e \u0432 \u0434\u0440\u0443\u0433\u0443\u044e. \u0417\u0434\u0435\u0441\u044c \u0435\u0441\u0442\u044c \u0432\u0430\u0436\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442, \u0447\u0442\u043e \u044d\u0442\u0438 \u0434\u0432\u0430 path \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u043c\u0435\u0442\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e.<\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043c \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u0440\u0438\u0432\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0447\u0438\u0441\u0435\u043b-\u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442 \u0438 \u0431\u0443\u043a\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442, \u043a\u0430\u043a \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u043b\u0438\u043d\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438. \u0422\u0430\u043c \u0435\u0441\u0442\u044c \u043f\u0440\u044f\u043c\u044b\u0435 \u043b\u0438\u043d\u0438\u0438 &#171;L = line&#187;, \u0435\u0441\u0442\u044c \u043a\u0440\u0438\u0432\u044b\u0435 \u0411\u0435\u0437\u044c\u0435 &#171;C = curve&#187;, \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044c \u043a\u0438\u0441\u0442\u044c \u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c &#171;M = move&#187;, \u0438.\u0442.\u0434. \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 path \u2014 \u044d\u0442\u043e \u043f\u043e \u0441\u0443\u0442\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f, \u043a\u0430\u043a \u0435\u0433\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043a\u0438\u0441\u0442\u044c\u044e, \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0441\u0435 \u0441\u043b\u043e\u0432\u0430 \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u044b \u0434\u043b\u044f \u043a\u0440\u0430\u0442\u043a\u043e\u0441\u0442\u0438. M 10 10 \u0431\u0443\u0434\u0435\u0442 \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0442\u044c &#171;\u043f\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044c \u043a\u0438\u0441\u0442\u044c \u0432 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b 10 10&#187;. L 50 50 \u0431\u0443\u0434\u0435\u0442 \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e &#171;\u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u043d\u0438\u044e \u0434\u043e 50 50&#187;. \u0427\u0435\u0433\u043e-\u0442\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0438\u0430\u043b\u044c\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u0432 \u044d\u0442\u043e\u043c \u043d\u0435\u0442. \u0411\u043e\u043b\u044c\u0448\u0438\u0435 \u0431\u0443\u043a\u0432\u044b \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b, \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u0431\u0443\u043a\u0432\u044b \u2014 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043a\u0438\u0441\u0442\u0438. \u042d\u0442\u043e \u043a\u0430\u043a \u0441 absolute \u0438 relative \u0432 CSS.<\/p>\n<p>  <\/p>\n<blockquote><p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0432\u0441\u0435 \u044d\u0442\u043e \u0441\u043b\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432 \u0432\u043e\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u2014 \u0432\u043e\u0437\u044c\u043c\u0438\u0442\u0435 \u043b\u044e\u0431\u043e\u0439 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u0439 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440, \u0438 \u043f\u043e\u0440\u0438\u0441\u0443\u0439\u0442\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0435 \u043b\u0438\u043d\u0438\u0438. \u0422\u0430\u043c \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0432\u0441\u0435 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0438 \u0432\u0441\u0435 \u0441\u0442\u0430\u043d\u0435\u0442 \u0432 \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u043c\u044b\u0441\u043b\u0435 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e.<\/p><\/blockquote>\n<p>\u0422\u0430\u043a \u0432\u043e\u0442. \u0415\u0441\u043b\u0438 \u044d\u0442\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043a\u0440\u0438\u0432\u043e\u0439 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u043d\u043e\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 &#171;M 0 0 L 10 10 L 20 20&#187; \u0438 &#171;M 0 0 L 10 10 M 10 20 L 20 20&#187; \u2014 \u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u043a\u0430\u043a \u043f\u043b\u0430\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u043e\u0434\u043d\u0443 \u043a\u0440\u0438\u0432\u0443\u044e \u0432 \u0434\u0440\u0443\u0433\u0443\u044e. \u0422\u0430\u043c \u0440\u0430\u0437\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439 \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f. \u0427\u0442\u043e \u0445\u043e\u0442\u0435\u043b \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u0440? \u0410 \u0432\u043e\u0442 \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0435, \u0442\u043e \u0432\u0441\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u0440\u0435\u0434\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u0432\u0435\u044f\u0442\u044c \u0432\u0441\u044e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043c\u0430\u0433\u0438\u044e. \u0415\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043a\u0440\u0438\u0432\u0430\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"xml\">&lt;svg viewBox='0 0 100 100'>     &lt;path id='magic-path' d='M 10 10 L 90 10 L 10 90 L 10 10' \/> &lt;\/svg><\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0440\u0435\u0443\u0433\u043e\u043b\u044c\u043d\u0438\u043a, \u0435\u0441\u043b\u0438 \u0431\u044b\u0442\u044c \u0442\u043e\u0447\u043d\u0435\u0435. \u041d\u0435\u0442\u0440\u0443\u0434\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0442\u0440\u0438 \u043b\u0438\u043d\u0438\u0438. \u0418 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0441\u0435\u0431\u0435 \u0448\u0430\u0431\u043b\u043e\u043d \u044d\u0442\u043e\u0439 \u043a\u0440\u0438\u0432\u043e\u0439 \u0432 JS:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const d = `M ${A.x} ${A.y} L ${B.x} ${B.y} L ${C.x} ${C.y} L ${A.x} ${A.y}`;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u043e \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442, \u0435\u0441\u043b\u0438 \u043c\u044b \u043d\u0430\u0447\u043d\u0435\u043c \u043f\u043b\u0430\u0432\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0442\u043e\u0447\u0435\u043a? \u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u2014 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043f\u043b\u0430\u0432\u043d\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0444\u043e\u0440\u043c\u044b. \u0422\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 \u0441\u0442\u0440\u0430\u0448\u043d\u044b\u0439-\u043f\u0440\u0435\u0441\u0442\u0440\u0430\u0448\u043d\u044b\u0439 \u043c\u043e\u0440\u0444\u0438\u043d\u0433:<\/p>\n<p>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/628a1df1b73444b4a1d3fde0\" data-style=\"\" id=\"628a1df1b73444b4a1d3fde0\" width=\"\"><\/div>\n<\/div>\n<p>  <\/p>\n<p>\u0412 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u0445 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u0441\u0435 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u043e\u0447\u0435\u043a \u0431\u043e\u043b\u044c\u0448\u0435. \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043d\u0430 JS \u043f\u043e \u0441\u0443\u0442\u0438 \u043f\u0430\u0440\u0441\u044f\u0442 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u043c\u0438 \u043a\u043e\u043d\u0442\u0443\u0440\u044b, \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u0442\u0430\u043a\u043e\u0439 \u0448\u0430\u0431\u043b\u043e\u043d, \u0438 \u043f\u043e\u0442\u043e\u043c \u043c\u0435\u043d\u044f\u044e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u043d\u0435\u043c \u043e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432 \u043e\u0434\u043d\u043e\u043c \u043a\u043e\u043d\u0442\u0443\u0440\u0435 \u0434\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432 \u0434\u0440\u0443\u0433\u043e\u043c. \u042d\u0442\u043e \u043d\u0435 \u043e\u0441\u043e\u0431\u043e \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430. \u041d\u043e.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e \u0438\u0434\u0435\u0435 \u043a\u043e\u043d\u0442\u0443\u0440\u044b \u0434\u043b\u044f \u043c\u043e\u0440\u0444\u0438\u043d\u0433\u0430 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u043d\u044b \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438. \u041d\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u043d\u0435 \u0443\u0434\u043e\u0441\u0443\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0445 \u043e\u0431\u0430, \u0438 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u0432\u0438\u0433\u0430\u0442\u044c \u0442\u043e\u0447\u043a\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0443\u0440\u0430, \u0447\u0442\u043e\u0431\u044b \u0441\u0432\u0435\u0441\u0442\u0438 \u0438\u0445 \u043a \u0434\u0440\u0443\u0433\u043e\u043c\u0443, \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u0432\u0430 \u043a\u043e\u043d\u0442\u0443\u0440\u0430 \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439. \u0415\u0441\u043b\u0438 \u044d\u0442\u043e \u0447\u0442\u043e-\u0442\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u0437\u0430\u043c\u043e\u0440\u043e\u0447\u0435\u043d\u043d\u043e\u0435 \u2014 \u0442\u043e \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u0432\u0441\u0435 \u0436\u0435 \u043e\u0442\u0434\u0430\u0442\u044c \u044d\u0442\u0443 \u0440\u0430\u0431\u043e\u0442\u0443 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0443, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0440\u0443\u043a\u0430 \u043d\u0430\u0431\u0438\u0442\u0430, \u043d\u043e \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u0447\u0442\u043e-\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0435, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0438 \u0441\u0430\u043c\u043e\u043c\u0443 \u043f\u043e\u0434\u0432\u0438\u0433\u0430\u0442\u044c. \u041d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0431\u043e\u044f\u0442\u044c\u0441\u044f. \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u0440\u0435\u0447\u044c \u0438\u0434\u0435\u0442 \u043f\u0440\u043e \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0433\u0434\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u043b\u043e\u0441\u043a\u0443\u044e \u043b\u0438\u043d\u0438\u044e, \u0438\u043b\u0438 \u0432\u0440\u043e\u0434\u0435 \u0442\u043e\u0433\u043e.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u0441\u043e\u0431\u043b\u0430\u0437\u043d \u0432\u0437\u044f\u0442\u044c \u043c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u044e\u0442 \u043a\u043e\u043d\u0442\u0443\u0440\u044b \u0441\u0430\u043c\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 ShapeShifter, \u0438\u043b\u0438 <a href=\"https:\/\/greensock.com\/morphsvg\/\" rel=\"nofollow noopener noreferrer\">MorphSVGPlugin<\/a> \u0434\u043b\u044f GSAP. \u0412 Inkscape \u044d\u0442\u0430 \u0448\u0442\u0443\u043a\u0430 \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0446\u0438\u0439 \u0442\u043e\u0436\u0435 \u0435\u0441\u0442\u044c. \u0412 Extensions. \u0412\u0441\u0435 \u043e\u043d\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u043e\u0433\u0443\u0442 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u043a\u0440\u0438\u0432\u044b\u0435 \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439. \u041d\u043e \u043e\u043d\u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u043d\u0430\u044e\u0442 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u0442\u043e\u0447\u043a\u0438 \u043f\u0440\u0438 \u043c\u043e\u0440\u0444\u0438\u043d\u0433\u0435. \u0410 \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u0430\u0436\u043d\u043e.<\/p>\n<p>  <\/p>\n<blockquote><p>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438-\u043c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043b\u043a\u0438 \u043a\u043e\u043d\u0442\u0443\u0440\u043e\u0432 \u043d\u0435 \u0437\u043d\u0430\u044e\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u043e \u0434\u0438\u0437\u0430\u0439\u043d\u0435 \u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u0440\u0442\u0438\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439. \u042d\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043d\u0435 \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e, \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430, \u0430 \u0432\u0441\u0435\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432.<\/p><\/blockquote>\n<p>\u0412 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u044d\u0442\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0431\u0435\u0440\u0443\u0442 \u043c\u043d\u043e\u0433\u043e-\u043c\u043d\u043e\u0433\u043e \u0442\u043e\u0447\u0435\u043a, \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442 \u0438\u0445 \u043d\u0430 \u043a\u043e\u043d\u0442\u0443\u0440\u0430\u0445 \u0440\u0430\u0432\u043d\u043e\u043c\u0435\u0440\u043d\u043e \u043f\u043e \u0432\u0441\u0435\u0439 \u0434\u043b\u0438\u043d\u0435, \u0438 \u0435\u0441\u043b\u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043e\u0442 \u043e\u0434\u043d\u043e\u0439 \u0442\u0430\u043a\u043e\u0439 \u043a\u0440\u0438\u0432\u043e\u0439 \u043a \u0434\u0440\u0443\u0433\u043e\u0439, \u0442\u043e \u0442\u0430\u043c \u043c\u043e\u0433\u0443\u0442 \u043d\u0430\u0447\u0430\u0442\u044c\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0435 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u044b \u2014 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043e\u0441\u0442\u0440\u044b\u0435 \u0443\u0433\u043b\u044b \u0442\u0430\u043c, \u0433\u0434\u0435 \u0438\u0445 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c, \u0438\u043b\u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442 \u2014 \u0441\u0442\u0440\u043e\u0433\u0438\u0435 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0444\u043e\u0440\u043c\u044b \u0432 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0438 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0441\u043f\u0430\u0434\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u043a\u0430\u0448\u0443 \u0438\u0437 \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0445 \u0437\u0430\u043a\u043e\u0440\u044e\u0447\u0435\u043a. \u0412 \u044d\u0442\u043e\u043c \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u043b\u0430\u0431\u043e\u0441\u0442\u044c \u044d\u0442\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432. \u0421\u0442\u043e\u0438\u0442 \u0438\u043c\u0435\u0442\u044c \u044d\u0442\u043e \u0432 \u0432\u0438\u0434\u0443. \u0415\u0441\u043b\u0438 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0442\u043e\u0447\u0435\u043a \u0432 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0432\u0430\u0436\u0435\u043d \u2014 \u0438\u0445 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u0432\u0438\u0433\u0430\u0442\u044c \u0441\u0432\u043e\u0438\u043c\u0438 \u0440\u0443\u043a\u0430\u043c\u0438.<\/p>\n<p>  <\/p>\n<h3 id=\"generativnye-plavnye-krivye\">\u0413\u0435\u043d\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043f\u043b\u0430\u0432\u043d\u044b\u0435 \u043a\u0440\u0438\u0432\u044b\u0435<\/h3>\n<p>  <\/p>\n<p>\u0421\u043e\u043f\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0442\u043e \u0438 \u0434\u0435\u043b\u043e \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u0435\u0442 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043c\u0435\u0441\u0442\u0430\u0445 \u2014 \u044d\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u043b\u0430\u0432\u043d\u044b\u0445 \u043b\u0438\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u0430\u043a-\u043d\u0438\u0431\u0443\u0434\u044c \u043a\u0430\u0447\u0430\u044e\u0442\u0441\u044f. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u043a \u0440\u0435\u0430\u043a\u0446\u0438\u044f \u043d\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0442\u0430\u043a \u0438 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0440\u0430\u043d\u0434\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043b\u0435\u0431\u0430\u043d\u0438\u044f. \u041a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430, \u043c\u043d\u043e\u0433\u0438\u0445 \u0441\u0442\u0430\u0432\u0438\u0442 \u0432 \u0442\u0443\u043f\u0438\u043a \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0434\u0435\u043b\u0430\u0442\u044c \u0434\u043b\u0438\u043d\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0443\u0440 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u0440\u0438\u0432\u044b\u0445 \u0411\u0435\u0437\u044c\u0435, \u0442\u0430\u043a \u0447\u0442\u043e \u0432\u043e\u043f\u0440\u043e\u0441 \u0441\u0442\u043e\u0438\u0442 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0415\u0449\u0435 \u0438\u0437 \u043c\u0438\u0440\u0430 CSS \u043c\u044b \u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u043a\u0440\u0438\u0432\u044b\u0435 \u0411\u0435\u0437\u044c\u0435 \u043c\u043e\u0436\u043d\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043f\u043e \u0442\u043e\u0447\u043a\u0430\u043c. \u0418\u0437 \u0441\u043e\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432 \u043c\u0438\u0440\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u043c\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u0440\u0438\u0432\u044b\u0435 \u0432\u044b\u0441\u0448\u0438\u0445 \u0441\u0442\u0435\u043f\u0435\u043d\u0435\u0439, \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0443\u0431\u0438\u0447\u0435\u0441\u043a\u0438\u0435. \u0410 \u0438\u0445 \u043c\u044b \u0440\u0438\u0441\u0443\u0435\u043c \u043f\u043e \u0447\u0435\u0442\u044b\u0440\u0435\u043c \u0442\u043e\u0447\u043a\u0430\u043c. \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u0438\u043d\u043d\u044b\u0445 \u043a\u0440\u0438\u0432\u044b\u0445 \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043a\u0440\u0438\u0432\u044b\u0445 \u0411\u0435\u0437\u044c\u0435. \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0442\u043e\u0447\u043a\u0430 \u043e\u0434\u043d\u043e\u0439 \u043a\u0440\u0438\u0432\u043e\u0439 \u0411\u0435\u0437\u044c\u0435 \u2014 \u044d\u0442\u043e \u043f\u0435\u0440\u0432\u0430\u044f \u0442\u043e\u0447\u043a\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u043a\u0440\u0438\u0432\u043e\u0439. \u0410 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044f\u044f \u0435\u0435 \u0442\u043e\u0447\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0432\u043e\u0439 \u0442\u043e\u0447\u043a\u043e\u0439 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439. \u0418 \u0442\u0430\u043a \u0434\u043e \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0441\u0442\u0438. \u0412 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u043e\u043c \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u0443\u044e \u0448\u0442\u0443\u043a\u0443 \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e \u2014 \u0442\u0430\u043c \u043f\u0440\u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0438 \u043b\u0438\u043d\u0438\u0439 \u0438\u0445 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u0441\u0430\u043c\u0438 \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0438 \u0441\u043e\u0435\u0434\u0438\u043d\u044f\u044e\u0442\u0441\u044f. \u041d\u043e \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u0448\u0442\u0443\u043a\u043e\u0432\u0438\u043d\u0443, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0442\u0435\u043c, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043d\u0442\u0443\u0440 \u043d\u0435 \u043b\u043e\u043c\u0430\u043b\u0441\u044f:<\/p>\n<p>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/628a1df107a8cd4fd1f4b5ff\" data-style=\"\" id=\"628a1df107a8cd4fd1f4b5ff\" width=\"\"><\/div>\n<\/div>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043c\u043d\u043e\u0433\u0438\u0445 \u0432\u0435\u0440\u0441\u0442\u0430\u043b\u044c\u0449\u0438\u043a\u043e\u0432 \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043a\u043e\u043d\u0442\u0443\u0440 \u043d\u0435 \u043b\u043e\u043c\u0430\u043b\u0441\u044f, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u0438\u043c\u043c\u0435\u0442\u0440\u0438\u0447\u043d\u043e \u0434\u0432\u0438\u0433\u0430\u0442\u044c \u043f\u0440\u0435\u0434\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u0442\u043e\u0447\u043a\u0443 \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0443\u0440\u0430 \u0438 \u0432\u0442\u043e\u0440\u0443\u044e \u0442\u043e\u0447\u043a\u0443 \u0434\u0440\u0443\u0433\u043e\u0433\u043e. \u0412\u043e\u043a\u0440\u0443\u0433 \u0438\u0445 \u043a\u0440\u0430\u0439\u043d\u0438\u0445 \u0442\u043e\u0447\u0435\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043a\u0430\u043a \u0431\u044b \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435. \u0415\u0441\u043b\u0438 \u044d\u0442\u0438 \u0447\u0435\u0442\u044b\u0440\u0435 (\u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u2014 \u0442\u0440\u0438) \u0442\u043e\u0447\u043a\u0438 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u043f\u0440\u044f\u043c\u043e\u0439 \u043b\u0438\u043d\u0438\u0438 \u2014 \u043a\u043e\u043d\u0442\u0443\u0440 \u043f\u043b\u0430\u0432\u043d\u044b\u0439. \u0412 \u0440\u0430\u043c\u043a\u0430\u0445 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u044d\u0442\u0443 \u0444\u0438\u0448\u043a\u0443 \u043b\u0435\u0433\u043a\u043e \u0441\u0430\u043c\u043e\u043c\u0443 \u0441\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c, \u0435\u0441\u043b\u0438 \u043f\u043e\u0434\u0432\u0438\u0433\u0430\u0442\u044c \u0442\u043e\u0447\u043a\u0438 \u0442\u0443\u0434\u0430-\u0441\u044e\u0434\u0430. \u041d\u043e \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432\u044b\u0445 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0432\u0441\u0435 \u043f\u043e\u0447\u0435\u043c\u0443-\u0442\u043e \u043f\u0440\u043e \u044d\u0442\u043e \u0437\u0430\u0431\u044b\u0432\u0430\u044e\u0442. \u041d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0439\u0442\u0435.<\/p>\n<p>  <\/p>\n<blockquote><p>\u041b\u0430\u0439\u0444\u0445\u0430\u043a: viewBox=&#8217;0 0 100 100&#8242; \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0443\u0434\u043e\u0431\u0435\u043d \u0432 \u0442\u0430\u043a\u0438\u0445 \u0433\u0435\u043d\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0448\u0442\u0443\u043a\u0430\u0445. \u0414\u0430 \u0438 \u0432\u043e\u043e\u0431\u0449\u0435, \u0434\u0443\u043c\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u0445 \u043e\u0442 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u0430 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u043e\u0449\u0435, \u0447\u0435\u043c \u0432 1784 \u0431\u0435\u0437\u0440\u0430\u0437\u043c\u0435\u0440\u043d\u044b\u0445 \u0435\u0434\u0438\u043d\u0438\u0446\u0430\u0445 \u0438\u0437 2823.<\/p><\/blockquote>\n<p>\u041a \u0441\u043b\u043e\u0432\u0443 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0442\u043e\u0447\u0435\u043a \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u043a\u0440\u0438\u0432\u044b\u0445, \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u044b\u0435 \u0430\u043d\u0438\u043c\u0430\u0448\u043a\u0438, \u043d\u043e \u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0433\u0438\u0431\u043a\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043b\u0438\u043d\u0438\u044f\u043c\u0438 \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0445\u0435\u043c\u0430\u0445, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0431\u044b\u043b\u043e \u043a\u0440\u0430\u0441\u0438\u0432\u043e, \u043a\u0430\u043a \u0432 <a href=\"https:\/\/anseki.github.io\/leader-line\/\" rel=\"nofollow noopener noreferrer\">LeaderLine<\/a>, \u0438\u043b\u0438 \u0447\u0442\u043e\u0431\u044b \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0431\u044b\u043b\u0438 \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u0441\u0433\u043b\u0430\u0436\u0435\u043d\u043d\u044b\u043c\u0438.<\/p>\n<p>  <\/p>\n<h3 id=\"risovanie-liniy\">\u0420\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u043b\u0438\u043d\u0438\u0439<\/h3>\n<p>  <\/p>\n<p>\u0420\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u043b\u0438\u043d\u0438\u0439 \u2014 \u044d\u0442\u043e \u0442\u0435\u043c\u0430, \u0442\u0435\u0441\u043d\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0430\u044f \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439. \u0421\u0442\u0440\u043e\u0433\u043e \u0433\u043e\u0432\u043e\u0440\u044f \u0432 SVG \u043d\u0435\u0442 \u043f\u0440\u044f\u043c\u043e \u0432\u043e\u0442 API \u0434\u043b\u044f \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u0438\u043d\u0438\u0439. \u041d\u043e \u043d\u0430 \u0434\u0435\u043b\u0435 \u044d\u0442\u043e\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u043c\u043e\u0436\u043d\u043e \u0438\u043c\u0438\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0432\u043e\u0439\u0441\u0442\u0432 stroke-dasharray \u0438 stroke-dashoffset. \u041e\u0431\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u043c\u044b\u0435:<\/p>\n<p>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/628a1df141d6a34fa4f7f1aa\" data-style=\"\" id=\"628a1df141d6a34fa4f7f1aa\" width=\"\"><\/div>\n<\/div>\n<p>  <\/p>\n<p>\u0412 \u0446\u0435\u043b\u043e\u043c \u043b\u043e\u0433\u0438\u043a\u0430 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u0430\u044f. \u0421\u0432\u043e\u0439\u0441\u0442\u0432\u043e stroke-dasharray \u2014 \u044d\u0442\u043e \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u0435 \u043b\u0438\u043d\u0438\u0439 \u0438 \u0434\u044b\u0440\u043e\u043a \u0432 \u043f\u0443\u043d\u043a\u0442\u0438\u0440\u0435. \u041f\u0435\u0440\u0432\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u2014 \u043b\u0438\u043d\u0438\u044f. \u0412\u0442\u043e\u0440\u043e\u0435 \u2014 \u0434\u044b\u0440\u043a\u0430. \u0422\u0440\u0435\u0442\u044c\u0435 \u2014 \u043b\u0438\u043d\u0438\u044f. \u0427\u0435\u0442\u0432\u0435\u0440\u0442\u043e\u0435 \u2014 \u0434\u044b\u0440\u043a\u0430. \u0438.\u0442.\u0434\u2026 \u041a\u043e\u0433\u0434\u0430 \u0447\u0438\u0441\u043b\u0430 \u0437\u0430\u043a\u0430\u043d\u0447\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u2014 \u0432\u0441\u0435 \u0438\u0434\u0435\u0442 \u043f\u043e \u043a\u0440\u0443\u0433\u0443. \u0418 \u0442\u0443\u0442 \u0443\u0436 \u043d\u0430 \u0447\u0442\u043e \u043f\u0435\u0440\u0432\u043e\u0435 \u0447\u0438\u0441\u043b\u043e \u043f\u043e\u043f\u0430\u043b\u043e, \u0442\u043e \u0438 \u0431\u0443\u0434\u0435\u0442. \u041f\u043e\u043f\u0430\u043b\u043e \u043d\u0430 \u043b\u0438\u043d\u0438\u044e \u2014 \u0431\u0443\u0434\u0435\u0442 \u043b\u0438\u043d\u0438\u044f. \u041f\u043e\u043f\u0430\u043b\u043e \u043d\u0430 \u0434\u044b\u0440\u043a\u0443 \u2014 \u0431\u0443\u0434\u0435\u0442 \u0434\u044b\u0440\u043a\u0430.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430\u0431\u043e\u0440 \u0438\u0437 \u043b\u0438\u043d\u0438\u0438 \u043d\u0443\u043b\u0435\u0432\u043e\u0439 \u0434\u043b\u0438\u043d\u044b \u0438 \u0434\u044b\u0440\u043a\u0438 \u0434\u043b\u0438\u043d\u043e\u0439 \u0432\u043e \u0432\u0435\u0441\u044c \u043a\u043e\u043d\u0442\u0443\u0440, \u0430 \u043f\u043e\u0442\u043e\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043d\u0430\u0431\u043e\u0440 \u0438\u0437 \u043b\u0438\u043d\u0438\u0438 \u0434\u043b\u0438\u043d\u043e\u0439 \u0432\u043e \u0432\u0435\u0441\u044c \u043a\u043e\u043d\u0442\u0443\u0440 \u0438 \u043d\u0443\u043b\u0435\u0432\u0443\u044e \u0434\u044b\u0440\u043a\u0443 \u2014 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u043b\u0438\u043d\u0438\u0438, \u043a\u0430\u043a \u043c\u044b \u0435\u0433\u043e \u0441\u0435\u0431\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c. \u041a\u0430\u043a \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441 \u043a\u0430\u0440\u0430\u043d\u0434\u0430\u0448\u043e\u043c. \u0415\u0441\u043b\u0438 \u0441\u0434\u0432\u0438\u0433\u0430\u0442\u044c \u0432\u0441\u0435 \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e stroke-dashoffset \u2014 \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0432 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u043e\u0440\u043e\u043d\u0443.<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u043c\u043e\u0436\u043d\u043e \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u043e \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0441\u0442\u0438. \u0417\u0434\u0435\u0441\u044c \u043d\u0435\u0442 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u043e\u043f\u0430\u0441\u043d\u044b\u0445 \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0445 \u043a\u0430\u043c\u043d\u0435\u0439. \u042d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0448\u0442\u0443\u043a\u0430, \u043f\u0440\u043e \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0441\u0442\u043e\u0438\u0442 \u0437\u043d\u0430\u0442\u044c. \u041c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u044f, \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u0437\u0433\u043b\u044f\u0434\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0441\u0442\u0440\u0435\u043b\u043a\u0430\u0445, \u0447\u0442\u043e-\u0442\u043e \u043f\u0438\u0441\u0430\u0442\u044c. \u041c\u043d\u043e\u0433\u043e \u0447\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u0442\u044c. \u041c\u0435\u043d\u044f\u0442\u044c \u044d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043c\u043e\u0436\u043d\u043e \u0438 \u043f\u043e \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0435, \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u044f \u0438\u0445 \u043a \u0447\u0435\u043c\u0443-\u043d\u0438\u0431\u0443\u0434\u044c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u0447\u0435\u0433\u043e-\u0442\u043e \u043d\u0430 \u0444\u043e\u043d\u0435, \u043f\u043e\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u0442 \u2014 \u044d\u0442\u043e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0430\u044f \u0448\u0442\u0443\u043a\u0430.<\/p>\n<p>  <\/p>\n<h3 id=\"maski\">\u041c\u0430\u0441\u043a\u0438<\/h3>\n<p>  <\/p>\n<p>\u0415\u0449\u0435 \u043e\u0434\u043d\u0430 \u043f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u0448\u0442\u0443\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0441\u0442\u043e\u0438\u0442 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044c \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u2014 \u044d\u0442\u043e \u043c\u0430\u0441\u043a\u0438. \u0415\u0441\u043b\u0438 \u0432\u044b \u043a\u043e\u0433\u0434\u0430-\u043d\u0438\u0431\u0443\u0434\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0441 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430\u043c\u0438, \u0442\u043e \u043d\u0435\u0441\u043e\u043c\u043d\u0435\u043d\u043d\u043e \u0438\u0445 \u0432\u0438\u0434\u0435\u043b\u0438. <\/p>\n<p>  <\/p>\n<p>\u0412 CSS \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c clip-path \u0438 mix-blend-mode \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0445\u0438\u043c\u0438\u0447\u0438\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435\u0435 \u0441 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043e\u0433\u043e\u0432\u043e\u0440\u043a\u0430\u043c\u0438. \u0410 \u0432 SVG \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0435 \u043c\u0430\u0441\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0434\u043e\u0431\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. \u0412 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u2014 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0447\u0430\u0441\u0442\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043c\u043e\u0436\u043d\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0430\u043c\u0443 \u043c\u0430\u0441\u043a\u0443. \u041c\u043e\u0436\u043d\u043e \u0435\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u043b\u0443\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0439, \u0434\u043b\u044f \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u043f\u043b\u0430\u0432\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432. \u0411\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0440 \u0434\u043b\u044f \u0442\u0432\u043e\u0440\u0447\u0435\u0441\u0442\u0432\u0430. \u0421 \u043c\u0430\u0441\u043a\u0430\u043c\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e \u0441\u0442\u043e\u0438\u0442 \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u0432\u044b \u0440\u0430\u043d\u044c\u0448\u0435 \u0441 \u043d\u0438\u043c\u0438 \u043d\u0435 \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u043b\u0438\u0441\u044c.<\/p>\n<p>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/628a1df25bce1f4fead98712\" data-style=\"\" id=\"628a1df25bce1f4fead98712\" width=\"\"><\/div>\n<\/div>\n<p>  <\/p>\n<p>\u0427\u0442\u043e-\u0442\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0435 \u043f\u0440\u043e \u043c\u0430\u0441\u043a\u0438 \u0441\u043b\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c. \u041d\u0443\u0436\u043d\u043e \u0431\u0440\u0430\u0442\u044c \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. \u041f\u043e\u0436\u0430\u043b\u0443\u0439 \u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u043c\u043e\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043d\u0435\u0434\u043e\u0443\u043c\u0435\u043d\u0438\u0435: \u0435\u0441\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f\u043c\u0438, \u043d\u0443\u0436\u043d\u043e \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0442\u0435\u043c, \u0447\u0442\u043e\u0431\u044b \u043c\u0430\u0441\u043a\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c \u0442\u0443\u0434\u0430, \u043a\u0443\u0434\u0430 \u043d\u0443\u0436\u043d\u043e. \u0422\u0443\u0442 \u0432\u0430\u043b\u0438\u0434\u0430\u0442\u043e\u0440 \u043d\u0435 \u043f\u043e\u0434\u0441\u043a\u0430\u0436\u0435\u0442, \u0435\u0441\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u043d\u0435 \u0442\u0430\u043a. \u0415\u0441\u043b\u0438 \u043a \u043e\u0434\u043d\u043e\u043c\u0443 \u0438 \u0442\u043e\u043c\u0443 \u0436\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0438 \u043c\u0430\u0441\u043a\u0443, \u0438 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e, \u0442\u043e \u043e\u043d \u0443\u0435\u0434\u0435\u0442 \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u043c\u0430\u0441\u043a\u043e\u0439 \u0438 \u0431\u0443\u0434\u0435\u0442 \u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0425\u043e\u0442\u044f \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u041f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0441\u043e\u043a\u043e\u0442\u043e\u0447\u043d\u044b\u0439 \u0440\u043e\u0431\u043e\u0442 \u0434\u0435\u043b\u0430\u0435\u0442 \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u0444\u0438\u0433\u043d\u044e, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b, \u0433\u043b\u0443\u043f\u044b\u0435 \u043b\u044e\u0434\u0438, \u0441\u043a\u0430\u0437\u0430\u043b\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c.<\/p>\n<p>  <\/p>\n<p>\u0418 \u0435\u0449\u0435 \u0441 \u043c\u0430\u0441\u043a\u0430\u043c\u0438 \u0445\u043e\u0440\u043e\u0448\u043e \u0441\u043e\u0447\u0435\u0442\u0430\u0435\u0442\u0441\u044f \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 3D \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0440\u0435\u0447\u0430\u0449\u0438\u0435 \u043b\u043e\u0433\u0438\u043a\u0435 \u0440\u0430\u0431\u043e\u0442\u044b z-index \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435:<\/p>\n<p>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/628a19deb73444b4a1d3fdde\" data-style=\"\" id=\"628a19deb73444b4a1d3fdde\" width=\"\"><\/div>\n<\/div>\n<p>  <\/p>\n<h3 id=\"filtry\">\u0424\u0438\u043b\u044c\u0442\u0440\u044b<\/h3>\n<p>  <\/p>\n<p>\u0422\u0435\u043c\u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 \u0432 SVG \u2014 \u044d\u0442\u043e \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u0434\u043b\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438. \u0422\u0430\u043c \u043c\u043d\u043e\u0433\u043e \u0447\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c. \u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043b\u0438\u0448\u044c \u043e\u0442\u043c\u0435\u0442\u0438\u043c, \u0447\u0442\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u0438\u0433\u0440\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u043c\u0438 \u043a\u0440\u0430\u0441\u043a\u0430\u043c\u0438. \u041a\u0430\u043a \u043f\u0440\u0438\u043c\u0435\u0440 \u2014 \u043b\u0438\u043f\u043a\u0438\u0439 \u0444\u0438\u043b\u044c\u0442\u0440 \u0438\u0437 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0441 \u043f\u0440\u0435\u043b\u043e\u0430\u0434\u0435\u0440\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u0432\u044b\u0448\u0435.<\/p>\n<p>  <\/p>\n<p>\u0413\u043b\u0430\u0432\u043d\u043e\u0435, \u0447\u0442\u043e \u0441\u0442\u043e\u0438\u0442 \u0437\u043d\u0430\u0442\u044c, \u0442\u0430\u043a \u044d\u0442\u043e \u0442\u043e, \u0447\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 SVG-\u0444\u0438\u043b\u044c\u0442\u0440\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u043f\u043e \u0441\u0432\u043e\u0435\u0439 \u043f\u0440\u0438\u0440\u043e\u0434\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043c\u043e\u0449\u043d\u043e\u0441\u0442\u0435\u0439. \u041e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e \u0437\u0430\u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442\u044c \u0432\u0441\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0435\u0441\u043b\u0438 \u0438\u043c\u0438 \u0437\u043b\u043e\u0443\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0442\u044c. \u0415\u0441\u043b\u0438 \u0442\u0435\u043c\u0430 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430, \u0442\u043e, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043f\u043e \u043d\u0435\u0439.<\/p>\n<p>  <\/p>\n<h2 id=\"svg-vs-2d-canvas-vs-webgl\">SVG vs. 2D-canvas vs. WebGL<\/h2>\n<p>  <\/p>\n<p>\u0418\u0442\u0430\u043a, \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c \u0441\u043e \u043c\u043d\u043e\u0433\u0438\u043c\u0438 \u0432\u0435\u0449\u0430\u043c\u0438. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438, \u043a\u0430\u043a \u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c SVG, \u043a\u0430\u043a \u0432\u043d\u0435\u0434\u0440\u044f\u0442\u044c \u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043a\u0430\u043a\u0438\u0435 \u0435\u0441\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u0438 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u0438\u0435\u043c\u044b. \u041d\u0430\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u043a \u0431\u0443\u0434\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u0432\u0441\u0435 \u044d\u0442\u043e \u0441 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u043a-\u0442\u043e \u0443\u0441\u0442\u0430\u043a\u0430\u043d\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f \u0432 \u043c\u0438\u0440\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u0432 \u0446\u0435\u043b\u043e\u043c. \u041e\u0431\u044b\u0447\u043d\u043e \u043b\u044e\u0434\u0438 \u0438\u0437\u0443\u0447\u0430\u044e\u0442 \u0432\u0441\u0435 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 HTML > CSS > SVG > 2D canvas > WebGL. \u0412\u043e\u0442 \u043f\u043e \u043d\u0435\u0439 \u0438 \u043f\u0440\u043e\u0439\u0434\u0435\u043c.<\/p>\n<p>  <\/p>\n<p>SVG-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u0432\u043d\u043e\u0441\u044f\u0442 \u0432 \u043c\u0438\u0440 HTML+CSS \u043d\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432 \u0432\u0438\u0434\u0435 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043a\u0440\u0438\u0432\u044b\u043c\u0438. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0440\u0438\u0432\u044b\u0435 \u043d\u0443\u0436\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u044b, \u0434\u0435\u043b\u0430\u0442\u044c \u043c\u043e\u0440\u0444\u0438\u043d\u0433, \u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043f\u043e \u043a\u0440\u0438\u0432\u044b\u043c. \u041c\u043e\u0436\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0445\u0438\u0442\u0440\u044b\u0435 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 CSS \u043c\u0430\u0441\u043a\u0438 \u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u044b. \u041d\u043e \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u043e, \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u044f \u043e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0410 \u0435\u0449\u0435 \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c SVG \u043a\u0430\u043a \u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043a\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 Image Map \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u0430\u0440\u0442 \u0438 \u0441\u0445\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0435\u0449\u0435 \u0438 \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 2D-\u043a\u0430\u043d\u0432\u0430\u0441\u043e\u043c \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u0443\u044e \u0448\u0442\u0443\u043a\u043e\u0432\u0438\u043d\u0443, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043b\u0435\u0433\u043a\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434 \u0440\u0430\u0437\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u044d\u043a\u0440\u0430\u043d\u0430. \u041c\u043e\u0440\u0444\u0438\u043d\u0433, \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 \u043f\u043e \u043a\u0440\u0438\u0432\u044b\u043c, \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u2014 \u0432\u0441\u0435 \u044d\u0442\u043e \u0435\u0441\u0442\u044c \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438. \u0415\u0441\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432\u0440\u043e\u0434\u0435 hover, \u0434\u0430 \u0438 \u0432 \u0446\u0435\u043b\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0435, \u0447\u0442\u043e \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u0441 HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u041b\u0435\u0433\u043a\u043e \u0432\u0441\u0435 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u041d\u043e \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c\u0438 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c\u0438 \u0438 \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0432 \u0432\u0438\u0434\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a. \u0422\u0430\u043a \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u044b \u043f\u0438\u043a\u0441\u0435\u043b\u0438 \u2014 \u0432\u044b\u0431\u043e\u0440\u0430 \u043d\u0435 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f. \u0422\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u043d\u0432\u0430\u0441. \u0415\u0449\u0435 \u0432 \u0442\u0435\u043e\u0440\u0438\u0438 \u0443 \u043a\u0430\u043d\u0432\u0430\u0441\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u0443\u0447\u0448\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043d\u0430 \u0442\u0435\u0445 \u0436\u0435 \u0437\u0430\u0434\u0430\u0447\u0430\u0445. \u0415\u0441\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u0438\u043d\u0442\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0442\u0435\u0441\u0442\u044b, \u0438 \u0432\u0440\u043e\u0434\u0435 \u0447\u0442\u043e-\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 \u043a\u0430\u043d\u0432\u0430\u0441\u0430. \u041d\u043e \u044d\u0442\u043e \u0432\u0441\u0435 \u0434\u0435\u043b\u043e \u0442\u0430\u043a\u043e\u0435 \u2014 \u043d\u0443\u0436\u043d\u043e \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0442\u0430\u043c \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0435 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u044b \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430. \u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0442\u043e, \u0447\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442 \u0432 \u0432\u0438\u0434\u0435 SVG, \u043d\u0438\u043a\u0430\u043a\u043e\u0439 2D-\u043a\u0430\u043d\u0432\u0430\u0441 \u0443\u0436\u0435 \u043d\u0435 \u0441\u043f\u0430\u0441\u0435\u0442.<\/p>\n<p>  <\/p>\n<p>\u0418 \u0433\u0434\u0435-\u0442\u043e \u0435\u0449\u0435 \u0434\u0430\u043b\u044c\u0448\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f WebGL. \u0422\u0443\u0442 \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u043d\u0430\u044f \u0441\u0432\u043e\u0431\u043e\u0434\u0430 \u0432 3D, \u0442\u0430\u043a \u0447\u0442\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u044d\u0442\u043e \u0441 \u043c\u0438\u0440\u043e\u043c SVG \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e. SVG \u0432 3D \u043d\u0435 \u0443\u043c\u0435\u0435\u0442. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u044b\u0447\u043d\u043e \u0434\u0435\u043b\u0430\u044e\u0442\u0441\u044f \u043d\u0430 SVG, \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e WebGL, \u043d\u0430\u043f\u0438\u0441\u0430\u0432 \u0432\u0441\u0435 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u044b \u0441\u0432\u043e\u0438\u043c\u0438 \u0440\u0443\u043a\u0430\u043c\u0438. \u041c\u0430\u0441\u043a\u0438 \u0438 \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0434\u043b\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0447\u0430\u0441\u0442\u043e \u0434\u0435\u043b\u0430\u044e\u0442 \u043d\u0430 WebGL. \u0412 \u044d\u0442\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435, \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043b\u0443\u0447\u0448\u0443\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u043d\u0430\u043f\u0438\u0441\u0430\u0432 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0442\u043e\u043f\u043e\u0440\u043d\u044b\u0439 \u0430\u0433\u043b\u043e\u0440\u0438\u0442\u043c \u0434\u043b\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u0447\u0430\u0441\u0442\u043d\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0437\u0430\u0434\u0430\u0447\u0438. \u041e\u0442\u0431\u0440\u043e\u0441\u0438\u0432 \u0432\u0441\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0438 \u0443\u0431\u0438\u0432 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0440\u043e\u0439 \u0432\u044b\u0438\u0433\u0440\u0430\u0442\u044c \u043f\u043e \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041d\u043e \u0442\u0443\u0442 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u0438 \u0437\u0430\u0447\u0435\u043c \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c. \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043a\u0430\u043a \u0432\u044b\u0438\u0433\u0440\u0430\u0442\u044c, \u0442\u0430\u043a \u0438 \u043d\u0430\u0433\u043e\u0432\u043d\u043e\u043a\u043e\u0434\u0438\u0442\u044c \u0447\u0442\u043e-\u0442\u043e, \u0447\u0442\u043e \u043f\u043e\u0442\u043e\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u0441 \u0442\u0440\u0443\u0434\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430 \u043d\u043e\u0443\u0442\u0431\u0443\u043a\u0430\u0445. \u042d\u0442\u043e \u0442\u0430 \u043e\u0431\u043b\u0430\u0441\u0442\u044c, \u0433\u0434\u0435 \u0443\u0436\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0443\u0436\u043d\u044b \u0442\u0435 \u0441\u0430\u043c\u044b\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0437\u043d\u0430\u043d\u0438\u044f \u0438\u0437 \u043c\u0438\u0440\u0430 computer science, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0432\u0441\u0435 \u043f\u0443\u0433\u0430\u044e\u0442 \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u0432 \u0432 IT.<\/p>\n<p>  <\/p>\n<h2 id=\"zaklyuchenie\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>  <\/p>\n<p>\u0423\u0445. \u041c\u043d\u043e\u0433\u043e \u0447\u0435\u0433\u043e \u043e\u0431\u0441\u0443\u0434\u0438\u043b\u0438, \u043f\u043e\u0440\u0430 \u043f\u043e\u0434\u0432\u0435\u0441\u0442\u0438 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0438\u0442\u043e\u0433\u0438. SVG-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u0430\u043a \u043c\u044b \u043f\u043e\u043d\u044f\u043b\u0438, \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0447\u0435\u043c-\u0442\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0438\u0430\u043b\u044c\u043d\u043e \u043d\u043e\u0432\u044b\u043c \u0438 \u0447\u0443\u0436\u0434\u044b\u043c \u0434\u043b\u044f \u043c\u0438\u0440\u0430 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430. \u041c\u043d\u043e\u0433\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u0437\u0434\u0435\u0441\u044c \u0442\u0430\u043a\u0438\u0435 \u0436\u0435, \u043a\u0430\u043a \u0438 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 HTML. \u041d\u043e \u0435\u0441\u0442\u044c \u0438 \u0441\u0432\u043e\u0438 \u0444\u0438\u0448\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439. \u041a\u043e\u043d\u0435\u0447\u043d\u043e \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u043e\u0445\u0432\u0430\u0442\u0438\u0442\u044c \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0432\u0441\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u0438\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f, \u043d\u043e \u044f \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u043c\u044b \u043e\u0445\u0432\u0430\u0442\u0438\u043b\u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0443\u0436\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438, \u0438\u043b\u0438 \u0435\u0441\u0442\u044c \u0440\u0435\u043b\u0435\u0432\u0430\u043d\u0442\u043d\u044b\u0439 \u043e\u043f\u044b\u0442 \u2014 \u043d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u0439\u0442\u0435\u0441\u044c \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0432 \u0432\u0430\u0448\u0435\u043c \u043e\u043f\u044b\u0442\u0435 \u0435\u0441\u0442\u044c \u0443\u0441\u043f\u0435\u0448\u043d\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0442\u043e\u0433\u043e \u0436\u0435 SMIL, \u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0430\u043a \u0436\u0435 \u0432\u044b \u0441\u043c\u043e\u0433\u043b\u0438 \u0432\u0441\u0435 \u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c? \u0410 \u043c\u043e\u0436\u0435\u0442 \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0448\u043b\u043e \u043d\u0435 \u0442\u0430\u043a \u2014 \u0442\u043e\u0436\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0438\u0442\u0435. \u041b\u044e\u0434\u044f\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u044d\u0442\u043e \u0447\u0438\u0442\u0430\u0442\u044c \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c, \u043b\u044e\u0431\u0430\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u0430.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/667116\/\"> https:\/\/habr.com\/ru\/articles\/667116\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/e0\/ks\/v-\/e0ksv-v8kqcvsigvfev1-ve3mrg.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/e0\/ks\/v-\/e0ksv-v8kqcvsigvfev1-ve3mrg.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u0412\u0440\u0435\u043c\u044f \u0438\u0434\u0435\u0442, \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f, \u043d\u0430\u0431\u0438\u0442\u044b\u0435 \u0448\u0438\u0448\u043a\u0438 \u043a\u043e\u043f\u044f\u0442\u0441\u044f, \u043d\u0430\u0441\u0442\u0430\u043b\u0430 \u043f\u043e\u0440\u0430 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u043f\u043e SVG-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c. \u0422\u0435\u043c \u0431\u043e\u043b\u0435\u0435, \u0447\u0442\u043e \u0442\u0435\u043c\u0430 \u0434\u043b\u044f \u043c\u043d\u043e\u0433\u0438\u0445 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440\u043e\u0432 \u0432\u0441\u0435 \u0435\u0449\u0435 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0439 \u0438 \u0437\u0430\u043f\u0443\u0442\u0430\u043d\u043d\u043e\u0439. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c SVG-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0441 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0442\u043e\u0440\u043e\u043d, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u0435\u043b, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438 \u0441\u043e\u043f\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b. \u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0445\u0430\u043a. \u0421\u043b\u0438\u0448\u043a\u043e\u043c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043e\u0431\u044a\u0435\u043c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c MDN \u0438 \u0435\u043c\u0443 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0441\u0430\u0439\u0442\u044b. \u0417\u0430\u0434\u0430\u0447\u0430 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0438 \u2014 \u0434\u0430\u0442\u044c \u043e\u0431\u0449\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0431\u044b\u0432\u0430\u0435\u0442, \u0438 \u043e\u0442 \u0447\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u0442\u043e\u043b\u043a\u043d\u0443\u0442\u044c\u0441\u044f, \u0435\u0441\u043b\u0438 \u0432\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u044d\u0442\u0443 \u0442\u0435\u043c\u0443, \u0430 \u0443 \u0432\u0430\u0441 \u043f\u043e\u043b\u043d\u0430\u044f \u043a\u0430\u0448\u0430 \u0432 \u0433\u043e\u043b\u043e\u0432\u0435.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-383895","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/383895","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=383895"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/383895\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=383895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=383895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=383895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}