{"id":478334,"date":"2026-05-02T19:45:29","date_gmt":"2026-05-02T19:45:29","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=478334"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=478334","title":{"rendered":"\u041f\u043e\u0447\u0435\u043c\u0443 animated SVG \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u043e Flutter \u00ab\u043a\u0430\u043a \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\u00bb \u2014 \u0438 \u043a\u0430\u043a \u044f \u043f\u043e\u043f\u044b\u0442\u0430\u043b\u0441\u044f \u044d\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c"},"content":{"rendered":"<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0414\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430: \u044f Flutter-\u0438\u043d\u0436\u0435\u043d\u0435\u0440 \u0438 \u0442\u0435\u0445\u043b\u0438\u0434, \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0433\u043e\u0434\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e \u0441 production-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u043d\u0430 Flutter \u2014 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u043c\u0438, web \u0438 \u0433\u0438\u0431\u0440\u0438\u0434\u043d\u044b\u043c\u0438. \u0412 \u043c\u043e\u0435\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0431\u044b\u043b\u0438 fintech, \u043c\u0430\u0440\u043a\u0435\u0442\u043f\u043b\u0435\u0439\u0441\u044b, food delivery \u0438 iGaming-\u043f\u0440\u043e\u0434\u0443\u043a\u0442\u044b, \u0433\u0434\u0435 \u043a UI \u043e\u0431\u044b\u0447\u043d\u043e \u043f\u0440\u0435\u0434\u044a\u044f\u0432\u043b\u044f\u044e\u0442 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0436\u0451\u0441\u0442\u043a\u0438\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f: \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0430, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u0430\u044f \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0430 \u0444\u0438\u0447.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/16b\/b5c\/71d\/16bb5c71d1b947de4a368b0089ee7f18.png\" alt=\"full_flutter_svg (\u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 ai \u0438\u0437 \u043c\u0435\u043d\u044f \u043f\u043b\u043e\u0445\u043e\u0439 \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a)\" title=\"full_flutter_svg (\u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 ai \u0438\u0437 \u043c\u0435\u043d\u044f \u043f\u043b\u043e\u0445\u043e\u0439 \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a)\" width=\"1672\" height=\"941\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/16b\/b5c\/71d\/16bb5c71d1b947de4a368b0089ee7f18.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/16b\/b5c\/71d\/16bb5c71d1b947de4a368b0089ee7f18.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>full_flutter_svg (\u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 ai \u0438\u0437 \u043c\u0435\u043d\u044f \u043f\u043b\u043e\u0445\u043e\u0439 \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a)<\/figcaption><\/div>\n<\/figure>\n<blockquote>\n<p>\u0412\u0435\u0431-\u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043e\u0442\u0434\u0430\u0451\u0442 SVG. \u0412 Chrome \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0412 Safari \u2014 \u0442\u043e\u0436\u0435.<br \/>\u0412\u043e Flutter \u2014 \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443, \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f \u0438\u043b\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u0431\u0445\u043e\u0434\u043d\u044b\u0445 \u043f\u0443\u0442\u0435\u0439 \u0432\u0440\u043e\u0434\u0435 GIF, \u0432\u0438\u0434\u0435\u043e, Lottie \u0438\u043b\u0438 \u0440\u0443\u0447\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p>\u042f \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u0440\u0435\u0448\u0438\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u043a\u043b\u0430\u0441\u0441 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0438 \u0432 \u0438\u0442\u043e\u0433\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043f\u0430\u043a\u0435\u0442 <code>full_svg_flutter<\/code> \u2014 SVG-\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u0434\u043b\u044f Flutter, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0442\u0430\u0440\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 SVG \u043a \u0442\u043e\u043c\u0443, \u043a\u0430\u043a \u0435\u0433\u043e \u043e\u0436\u0438\u0434\u0430\u0435\u0448\u044c \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043f\u043e\u0447\u0435\u043c\u0443 animated SVG \u2014 \u044d\u0442\u043e \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u201c\u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c path\u201d, \u043a\u0430\u043a\u0438\u0435 \u043f\u043e\u0434\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c, \u0433\u0434\u0435 \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e, \u0430 \u0433\u0434\u0435 \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0432\u0441\u0435\u043c \u0434\u0440\u0443\u0433\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b.<\/p>\n<\/blockquote>\n<p>\u0412 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442 \u044f \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u0437\u0430\u0434\u0430\u0447\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0432\u0443\u0447\u0438\u0442 \u043f\u0440\u043e\u0441\u0442\u043e: \u201c\u0432\u0437\u044f\u0442\u044c SVG, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0435\u0433\u043e \u0432\u043e Flutter\u201d. \u041d\u043e \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0435\u0441\u0442\u044c SMIL, CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, path morphing, masks, filters \u0438\u043b\u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438, \u044d\u0442\u043e \u0443\u0436\u0435 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430, \u0430 \u043f\u043e\u0447\u0442\u0438 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0439 \u043f\u0430\u0439\u043f\u043b\u0430\u0439\u043d.<\/p>\n<p>\u0422\u0430\u043a \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f <code>full_svg_flutter<\/code> \u2014 \u043c\u043e\u044f \u043f\u043e\u043f\u044b\u0442\u043a\u0430 \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 SVG \u0432\u043e Flutter \u043a \u0442\u043e\u043c\u0443, \u043a\u0430\u043a \u043c\u044b \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u0432\u0438\u0434\u0435\u0442\u044c \u0435\u0433\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<h2>\u041f\u043e\u0447\u0435\u043c\u0443 animated SVG \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u043e Flutter \u00ab\u043a\u0430\u043a \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\u00bb \u2014 \u0438 \u043a\u0430\u043a \u044f \u043f\u043e\u043f\u044b\u0442\u0430\u043b\u0441\u044f \u044d\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/h2>\n<p>\u0412\u0435\u0431-\u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043e\u0442\u0434\u0430\u0451\u0442 SVG.<br \/> \u0412 Chrome \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<br \/> \u0412 Safari \u2014 \u0442\u043e\u0436\u0435.<br \/> \u0412\u043e Flutter \u2014 \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443, \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f \u0438\u043b\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u0431\u0445\u043e\u0434\u043d\u044b\u0445 \u043f\u0443\u0442\u0435\u0439 \u0432\u0440\u043e\u0434\u0435 GIF, \u0432\u0438\u0434\u0435\u043e, Lottie \u0438\u043b\u0438 \u0440\u0443\u0447\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<p>\u042f \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u0440\u0435\u0448\u0438\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u043a\u043b\u0430\u0441\u0441 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0438 \u0432 \u0438\u0442\u043e\u0433\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043f\u0430\u043a\u0435\u0442 <code>full_svg_flutter<\/code> \u2014 SVG-\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u0434\u043b\u044f Flutter, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0442\u0430\u0440\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 SVG \u043a \u0442\u043e\u043c\u0443, \u043a\u0430\u043a \u0435\u0433\u043e \u043e\u0436\u0438\u0434\u0430\u0435\u0448\u044c \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/p>\n<p>\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443:<\/p>\n<ul>\n<li>\n<p>\u043f\u043e\u0447\u0435\u043c\u0443 animated SVG \u2014 \u044d\u0442\u043e \u043d\u0435 \u201c\u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c path\u201d;<\/p>\n<\/li>\n<li>\n<p>\u043a\u0430\u043a\u0438\u0435 \u043f\u043e\u0434\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c;<\/p>\n<\/li>\n<li>\n<p>\u0433\u0434\u0435 \u0442\u0430\u043a\u043e\u0439 \u043f\u0430\u043a\u0435\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u0435\u043d;<\/p>\n<\/li>\n<li>\n<p>\u0433\u0434\u0435 \u043e\u043d, \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442, \u043d\u0435 \u043d\u0443\u0436\u0435\u043d;<\/p>\n<\/li>\n<li>\n<p>\u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u0432 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0448\u044c \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0435\u043b\u0430\u0435\u0448\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440.<\/p>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/pub.dev\/packages\/full_svg_flutter\" rel=\"noopener noreferrer nofollow\"><strong>\u041f\u0430\u043a\u0435\u0442<\/strong><\/a><\/p>\n<h3>\u041e\u0442\u043a\u0443\u0434\u0430 \u0432\u043e\u043e\u0431\u0449\u0435 \u0431\u0435\u0440\u0451\u0442\u0441\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430<\/h3>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c54\/b57\/5fd\/c54b575fd378df55d9ea74999eb217ac.png\" alt=\"\u0438\u043d\u043e\u0433\u0434\u0430 \u043c\u044b \u0434\u0430\u0436\u0435 \u043d\u0435 \u0432\u0438\u0434\u0438\u043c \u043d\u0438\u0447\u0435\u0433\u043e (\u0434\u0430\u0436\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043a\u0430\u0434\u0440\u0430)\" title=\"\u0438\u043d\u043e\u0433\u0434\u0430 \u043c\u044b \u0434\u0430\u0436\u0435 \u043d\u0435 \u0432\u0438\u0434\u0438\u043c \u043d\u0438\u0447\u0435\u0433\u043e (\u0434\u0430\u0436\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043a\u0430\u0434\u0440\u0430)\" width=\"1672\" height=\"941\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/c54\/b57\/5fd\/c54b575fd378df55d9ea74999eb217ac.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c54\/b57\/5fd\/c54b575fd378df55d9ea74999eb217ac.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/p>\n<div><figcaption>\u0438\u043d\u043e\u0433\u0434\u0430 \u043c\u044b \u0434\u0430\u0436\u0435 \u043d\u0435 \u0432\u0438\u0434\u0438\u043c \u043d\u0438\u0447\u0435\u0433\u043e (\u0434\u0430\u0436\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043a\u0430\u0434\u0440\u0430)<\/figcaption><\/div>\n<\/figure>\n<p>\u0415\u0441\u043b\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0435 SVG, \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 Flutter \u0434\u0430\u0432\u043d\u043e \u0443\u0436\u0435 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0437\u0430\u0434\u0430\u0447 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0445\u043e\u0440\u043e\u0448\u043e.<\/p>\n<p>\u041d\u043e\u00a0\u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u0447\u044c \u0437\u0430\u0445\u043e\u0434\u0438\u0442 \u043e <strong>\u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 SVG \u0438\u0437\u00a0production<\/strong>,\u00a0\u0431\u044b\u0441\u0442\u0440\u043e \u0432\u044b\u044f\u0441\u043d\u044f\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u00ab\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 SVG\u00bb \u0438 \u00ab\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 SVG \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043a\u0430\u043a\u00a0\u0432\u00a0\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\u00bb\u00a0\u2014 \u044d\u0442\u043e \u0441\u043e\u0432\u0441\u0435\u043c \u0440\u0430\u0437\u043d\u044b\u0435 \u0443\u0440\u043e\u0432\u043d\u0438.<\/p>\n<p>\u0422\u0438\u043f\u0438\u0447\u043d\u044b\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<ol>\n<li>\n<p>\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u0438\u043b\u0438 \u0432\u0435\u0431-\u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043e\u0442\u0434\u0430\u0451\u0442 SVG;<\/p>\n<\/li>\n<li>\n<p>\u044d\u0442\u043e\u0442 SVG \u0443\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 web;<\/p>\n<\/li>\n<li>\n<p>\u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c: <\/p>\n<ul>\n<li>\n<p>SMIL-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438,<\/p>\n<\/li>\n<li>\n<p>CSS keyframes,<\/p>\n<\/li>\n<li>\n<p>path morphing,<\/p>\n<\/li>\n<li>\n<p>masks,<\/p>\n<\/li>\n<li>\n<p>clipping,<\/p>\n<\/li>\n<li>\n<p>filters,<\/p>\n<\/li>\n<li>\n<p>text \/ textPath,<\/p>\n<\/li>\n<li>\n<p>nested transforms,<\/p>\n<\/li>\n<li>\n<p><code>defs<\/code>, <code>use<\/code>, \u0441\u0441\u044b\u043b\u043a\u0438 \u043f\u043e <code>id<\/code>,<\/p>\n<\/li>\n<li>\n<p>\u0441\u0442\u0438\u043b\u0438, \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438, \u0438 \u0447\u0435\u0440\u0435\u0437 CSS;<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u043f\u043e\u0442\u043e\u043c \u044d\u0442\u043e\u0442 \u0436\u0435 \u0444\u0430\u0439\u043b \u0445\u043e\u0442\u044f\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043e Flutter.<\/p>\n<\/li>\n<\/ol>\n<p>\u0418 \u0432\u043e\u0442 \u0437\u0434\u0435\u0441\u044c \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435.<\/p>\n<p>\u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u201c\u043e\u0431\u044b\u0447\u043d\u044b\u043c SVG\u201d, \u043d\u0430 \u0434\u0435\u043b\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0434\u0430\u0432\u043d\u043e \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0441\u0430\u043c\u043e \u0441\u043e\u0431\u043e\u0439 \u0440\u0430\u0437\u0443\u043c\u0435\u044e\u0449\u0435\u0435\u0441\u044f.<\/p>\n<h3>\u0427\u0442\u043e \u044f \u0445\u043e\u0442\u0435\u043b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432 \u0438\u0442\u043e\u0433\u0435<\/h3>\n<p>\u0421\u043d\u0430\u0440\u0443\u0436\u0438 \u0437\u0430\u0434\u0430\u0447\u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e:<\/p>\n<pre><code class=\"dart\">FSvgPicture.asset('assets\/animated.svg')<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:87px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0418\u0434\u0435\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0443 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043d\u0443\u0436\u043d\u043e \u0434\u0443\u043c\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a:<\/p>\n<ul>\n<li>\n<p>\u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u0442\u044c XML;<\/p>\n<\/li>\n<li>\n<p>\u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c DOM;<\/p>\n<\/li>\n<li>\n<p>\u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u044c transform tree;<\/p>\n<\/li>\n<li>\n<p>\u043e\u0442\u0441\u043b\u0435\u0434\u0438\u0442\u044c timeline \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c path data;<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c filters;<\/p>\n<\/li>\n<li>\n<p>\u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0430 \u0447\u0442\u043e \u043d\u0430\u0434\u043e \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 frame.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u0438\u0434\u0435\u0430\u043b\u0435 \u2014 \u043f\u0435\u0440\u0435\u0434\u0430\u043b SVG \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0431\u043b\u0438\u0437\u043a\u043e\u0435 \u043a \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e\u043c\u0443.<\/p>\n<h3>\u0421\u0440\u0430\u0437\u0443 \u0432\u0430\u0436\u043d\u0430\u044f \u043e\u0433\u043e\u0432\u043e\u0440\u043a\u0430: \u044d\u0442\u043e \u043d\u0435 \u00ab\u0437\u0430\u043c\u0435\u043d\u0430 \u0432\u043e\u043e\u0431\u0449\u0435 \u0432\u0441\u0435\u043c\u0443\u00bb<\/h3>\n<p>\u042f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0445\u043e\u0447\u0443 \u043f\u0440\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u044d\u0442\u043e \u0432 \u043d\u0430\u0447\u0430\u043b\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u043d\u0430\u0447\u0435 \u0441\u0442\u0430\u0442\u044c\u044f \u043b\u0435\u0433\u043a\u043e \u0441\u043a\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433.<\/p>\n<p><code>full_svg_flutter<\/code> \u2014 \u044d\u0442\u043e <strong>\u043d\u0435 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u0435\u0440\u0435\u0431\u0440\u044f\u043d\u0430\u044f \u043f\u0443\u043b\u044f<\/strong>.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043a\u043e\u0440\u043e\u0442\u043a\u043e:<\/p>\n<ul>\n<li>\n<p><code>flutter_svg<\/code> \u2014 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0445 SVG-\u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432;<\/p>\n<\/li>\n<li>\n<p>Lottie \u2014 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442, \u0435\u0441\u043b\u0438 source of truth \u0443 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0438\u043c\u0435\u043d\u043d\u043e Lottie;<\/p>\n<\/li>\n<li>\n<p>Rive \u2014 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442, \u0435\u0441\u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0441\u0434\u0435\u043b\u0430\u043d\u0430 \u0432 Rive;<\/p>\n<\/li>\n<li>\n<p>PNG\/WebP \u2014 \u0438\u043d\u043e\u0433\u0434\u0430 \u0432\u043e\u043e\u0431\u0449\u0435 \u043b\u0443\u0447\u0448\u0438\u0439 \u043e\u0442\u0432\u0435\u0442, \u0435\u0441\u043b\u0438 \u0437\u0430\u0434\u0430\u0447\u0430 \u0447\u0438\u0441\u0442\u043e \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u043e\u0439 use case \u0434\u0440\u0443\u0433\u043e\u0439:<\/p>\n<blockquote>\n<p>SVG \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043a\u0430\u043a \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442. \u041e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0418 \u0445\u043e\u0447\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 SVG \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0432\u043e Flutter \u0431\u0435\u0437 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438 \u0432 GIF, \u0432\u0438\u0434\u0435\u043e \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u043e\u0439 \u0444\u043e\u0440\u043c\u0430\u0442.<\/p>\n<\/blockquote>\n<h3>\u041f\u043e\u0447\u0435\u043c\u0443 animated SVG \u2014 \u044d\u0442\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0447\u0435\u043c \u043a\u0430\u0436\u0435\u0442\u0441\u044f<\/h3>\n<p>\u041d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043a\u0430\u0436\u0435\u0442\u0441\u044f: \u043d\u0443 \u0447\u0442\u043e \u0442\u0430\u043c, SVG &#8212; \u044d\u0442\u043e \u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0435\u043a\u0442\u043e\u0440.<\/p>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/387\/7ac\/b6c\/3877acb6c4933200b6deb53b5f46796f.png\" width=\"1672\" height=\"941\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/387\/7ac\/b6c\/3877acb6c4933200b6deb53b5f46796f.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/387\/7ac\/b6c\/3877acb6c4933200b6deb53b5f46796f.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u041d\u043e\u00a0\u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0448\u044c \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430\u00a0\u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b, \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u044f\u0441\u043d\u043e, \u0447\u0442\u043e\u00a0SVG\u00a0\u2014 \u044d\u0442\u043e \u043d\u0435\u00a0\u043f\u0440\u043e\u0441\u0442\u043e \u00ab\u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0431\u043e\u0440 path\u2011\u043e\u0432\u00bb.<\/p>\n<p>\u042d\u0442\u043e \u0441\u0440\u0430\u0437\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u043e\u0451\u0432:<\/p>\n<ul>\n<li>\n<p>\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043d\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0441\u0442\u0438\u043b\u0438 \u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0441\u0441\u044b\u043b\u043a\u0438 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442;<\/p>\n<\/li>\n<li>\n<p>\u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0444\u0438\u043b\u044c\u0442\u0440\u044b;<\/p>\n<\/li>\n<li>\n<p>\u0442\u0435\u043a\u0441\u0442;<\/p>\n<\/li>\n<li>\n<p>\u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0435\u0440\u0435\u0432\u0430;<\/p>\n<\/li>\n<li>\n<p>\u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435.<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u043e \u0435\u0441\u0442\u044c \u043f\u043e \u0441\u0443\u0442\u0438 \u0442\u044b \u0438\u043c\u0435\u0435\u0448\u044c \u0434\u0435\u043b\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u043e\u0439, \u0430 \u0441 \u0447\u0435\u043c-\u0442\u043e \u043c\u0435\u0436\u0434\u0443:<\/p>\n<ul>\n<li>\n<p>DOM,<\/p>\n<\/li>\n<li>\n<p>style engine,<\/p>\n<\/li>\n<li>\n<p>animation engine,<\/p>\n<\/li>\n<li>\n<p>render tree.<\/p>\n<\/li>\n<\/ul>\n<p>\u0418 \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 SVG-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u044d\u0442\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u0437\u0430\u043c\u0435\u0442\u043d\u043e.<\/p>\n<h3>\u041a\u0430\u043a\u0438\u0435 \u0444\u0438\u0447\u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 SVG \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u043b\u043e\u043c\u0430\u044e\u0442 \u00ab\u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u00bb<\/h3>\n<p>\u0412\u043e\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430\u0434\u0430\u0447\u0443 \u043d\u0435\u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u043e\u0439:<\/p>\n<ul>\n<li>\n<p><code>&lt;animate&gt;<\/code><\/p>\n<\/li>\n<li>\n<p><code>&lt;animateTransform&gt;<\/code><\/p>\n<\/li>\n<li>\n<p><code>&lt;animateMotion&gt;<\/code><\/p>\n<\/li>\n<li>\n<p>CSS <code>@keyframes<\/code><\/p>\n<\/li>\n<li>\n<p>path morphing<\/p>\n<\/li>\n<li>\n<p>animated <code>opacity<\/code>, <code>fill<\/code>, <code>stroke<\/code>, <code>transform<\/code><\/p>\n<\/li>\n<li>\n<p>masks \/ clipPath<\/p>\n<\/li>\n<li>\n<p>filters<\/p>\n<\/li>\n<li>\n<p>gradients<\/p>\n<\/li>\n<li>\n<p><code>defs<\/code> \/ <code>use<\/code><\/p>\n<\/li>\n<li>\n<p>nested groups<\/p>\n<\/li>\n<li>\n<p><code>text<\/code>, <code>tspan<\/code>, <code>textPath<\/code><\/p>\n<\/li>\n<li>\n<p>presentation attributes + inline style + CSS inside <code>&lt;style&gt;<\/code><\/p>\n<\/li>\n<li>\n<p>inheritance \/ cascade<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432\u0441\u0435 \u044d\u0442\u0438 \u0432\u0435\u0449\u0438 <strong>\u043d\u0435 \u0436\u0438\u0432\u0443\u0442 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e<\/strong>.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<ul>\n<li>\n<p>\u043d\u0430 \u0433\u0440\u0443\u043f\u043f\u0443 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0430\u0432\u0435\u0448\u0430\u043d transform;<\/p>\n<\/li>\n<li>\n<p>\u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0451 \u2014 mask;<\/p>\n<\/li>\n<li>\n<p>\u0432\u043d\u0443\u0442\u0440\u0438 mask \u2014 \u0435\u0449\u0451 \u043e\u0434\u0438\u043d shape;<\/p>\n<\/li>\n<li>\n<p>\u0443 shape \u0446\u0432\u0435\u0442 \u0437\u0430\u0434\u0430\u043d \u0447\u0435\u0440\u0435\u0437 CSS-\u043a\u043b\u0430\u0441\u0441;<\/p>\n<\/li>\n<li>\n<p>\u0441\u0430\u043c \u043a\u043b\u0430\u0441\u0441 \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 keyframes;<\/p>\n<\/li>\n<li>\n<p>\u0430 \u043f\u043e\u0432\u0435\u0440\u0445 \u0435\u0449\u0451 \u043f\u0440\u0438\u043c\u0435\u043d\u0451\u043d filter.<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u043e \u0435\u0441\u0442\u044c \u201c\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u0444\u0438\u0447\u0443\u201d \u0447\u0430\u0441\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043d\u0430\u0434\u043e \u0443\u0436\u0435 \u0438\u043c\u0435\u0442\u044c \u043f\u043e\u043b-\u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430.<\/p>\n<h3>\u0427\u0442\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438<\/h3>\n<h4>1. SVG DOM<\/h4>\n<p>\u041f\u0435\u0440\u0432\u043e\u0435, \u0431\u0435\u0437 \u0447\u0435\u0433\u043e \u0432\u0441\u0451 \u0431\u044b\u0441\u0442\u0440\u043e \u0440\u0430\u0437\u0432\u0430\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u2014 \u044d\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 DOM.<\/p>\n<p>\u041d\u0443\u0436\u043d\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u0442\u044c XML \u0432 \u043d\u0430\u0431\u043e\u0440 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0430 \u0438\u043c\u0435\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0437\u043d\u0430\u0435\u0442:<\/p>\n<ul>\n<li>\n<p>\u0441\u0432\u043e\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b;<\/p>\n<\/li>\n<li>\n<p>\u0434\u0435\u0442\u0435\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f;<\/p>\n<\/li>\n<li>\n<p><code>id<\/code>, <code>class<\/code>;<\/p>\n<\/li>\n<li>\n<p>computed style;<\/p>\n<\/li>\n<li>\n<p>transform;<\/p>\n<\/li>\n<li>\n<p>paint properties;<\/p>\n<\/li>\n<li>\n<p>visibility \/ display;<\/p>\n<\/li>\n<li>\n<p>\u0441\u0432\u044f\u0437\u0438 \u0441 <code>defs<\/code>, <code>use<\/code>, <code>clipPath<\/code>, <code>mask<\/code>, gradients \u0438 filters.<\/p>\n<\/li>\n<\/ul>\n<p>\u0411\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0434\u0430\u0436\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u043d\u0435 \u0433\u043e\u0432\u043e\u0440\u044f \u0443\u0436\u0435 \u043e\u0431 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.<\/p>\n<h4>2. Style resolution \u0438 \u043a\u0430\u0441\u043a\u0430\u0434<\/h4>\n<p>\u041e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043a\u043e\u0432\u0430\u0440\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 SVG \u2014 \u0441\u0442\u0438\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u044c \u043e\u0442\u043e\u0432\u0441\u044e\u0434\u0443.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 <code>fill<\/code> \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0437\u0430\u0434\u0430\u043d \u0442\u0430\u043a:<\/p>\n<pre><code class=\"xml\">&lt;path fill=\"red\" \/&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0438\u043b\u0438 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"xml\">&lt;path style=\"fill:red;\" \/&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0438\u043b\u0438 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"xml\">&lt;style&gt;  .logo-shape {    fill: red;  }&lt;\/style&gt;&lt;path class=\"logo-shape\" \/&gt;<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0418 \u0432\u0441\u0451 \u044d\u0442\u043e \u0435\u0449\u0451 \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c\u0441\u044f.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0435 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u043b\u043e\u0439 <strong>computed styles<\/strong>, \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u0441\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u044b: \u0432 \u043e\u0434\u043d\u043e\u043c SVG \u0447\u0442\u043e-\u0442\u043e \u043a\u0440\u0430\u0441\u0438\u0442\u0441\u044f \u043d\u0435 \u0442\u0435\u043c \u0446\u0432\u0435\u0442\u043e\u043c, \u0432 \u0434\u0440\u0443\u0433\u043e\u043c \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f stroke, \u0432 \u0442\u0440\u0435\u0442\u044c\u0435\u043c \u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441\u044b.<\/p>\n<h4>3. \u0422\u0430\u0439\u043c\u043b\u0430\u0439\u043d \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439<\/h4>\n<p>\u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f SMIL \u0438\u043b\u0438 CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f, \u043d\u0443\u0436\u043d\u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<p>\u0422\u043e \u0435\u0441\u0442\u044c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u201c\u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0435 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438\u201d.<\/p>\n<p>\u041d\u0443\u0436\u043d\u043e \u0443\u043c\u0435\u0442\u044c:<\/p>\n<ul>\n<li>\n<p>\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0442\u044c \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c <code>begin<\/code>, <code>dur<\/code>, <code>repeatCount<\/code>, <code>repeatDur<\/code>, <code>fill<\/code>;<\/p>\n<\/li>\n<li>\n<p>\u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>\u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c easing \/ splines;<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043a \u0446\u0435\u043b\u0435\u0432\u043e\u043c\u0443 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0443;<\/p>\n<\/li>\n<li>\n<p>\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c render state.<\/p>\n<\/li>\n<\/ul>\n<p>\u0418 \u0432\u0441\u0451 \u044d\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0441 frame lifecycle Flutter.<\/p>\n<h4>4. Path morphing<\/h4>\n<p>Path morphing \u2014 \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u0438 \u0431\u043e\u043b\u0435\u0437\u043d\u0435\u043d\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043e\u0447\u0435\u043d\u044c \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c, \u0442\u043e \u043c\u0430\u043b\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0437\u044f\u0442\u044c \u0434\u0432\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0441 <code>d=\"\"<\/code> \u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u201c\u0441\u043c\u0435\u0448\u0430\u0442\u044c\u201d \u0447\u0438\u0441\u043b\u0430.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b morphing \u0431\u044b\u043b \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u043c, \u043d\u0443\u0436\u043d\u043e:<\/p>\n<ul>\n<li>\n<p>\u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u0442\u044c path data;<\/p>\n<\/li>\n<li>\n<p>\u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u044b;<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043a \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u043c\u0443 \u0432\u0438\u0434\u0443;<\/p>\n<\/li>\n<li>\n<p>\u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b path-\u043e\u0432 \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043c\u044b;<\/p>\n<\/li>\n<li>\n<p>\u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043a\u043e\u043c\u0430\u043d\u0434;<\/p>\n<\/li>\n<li>\n<p>\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043e\u0431\u0440\u0430\u0442\u043d\u043e.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0430 \u0434\u0435\u043c\u043e-\u0444\u0430\u0439\u043b\u0430\u0445 \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u201c\u043f\u043e\u0447\u0442\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c\u201d \u0431\u044b\u0441\u0442\u0440\u043e.<br \/>\u041d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 SVG \u2014 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0432\u0435\u0441\u0435\u043b\u044c\u0435.<\/p>\n<h4>5. Filters<\/h4>\n<p>SVG-\u0444\u0438\u043b\u044c\u0442\u0440\u044b \u2014 \u044d\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u0438\u0440.<\/p>\n<p>\u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0431\u0440\u0430\u0442\u044c \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0432\u0435\u0449\u0438 \u0432\u0440\u043e\u0434\u0435 blur, color matrix, blend\/composite \u0438\u043b\u0438 drop shadow, \u0431\u044b\u0441\u0442\u0440\u043e \u0432\u044b\u044f\u0441\u043d\u044f\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432\u043e\u043f\u0440\u043e\u0441 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439, \u043d\u043e \u0438 \u0432 \u0442\u043e\u043c:<\/p>\n<ul>\n<li>\n<p>\u043a\u0430\u043a \u0441\u0447\u0438\u0442\u0430\u0442\u044c bounds;<\/p>\n<\/li>\n<li>\n<p>\u043a\u0430\u043a \u043d\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e;<\/p>\n<\/li>\n<li>\n<p>\u043a\u0430\u043a \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442;<\/p>\n<\/li>\n<li>\n<p>\u043a\u0430\u043a \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e, \u0447\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c;<\/p>\n<\/li>\n<li>\n<p>\u043a\u0430\u043a \u043d\u0435 \u0443\u0431\u0438\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043d\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u0445.<\/p>\n<\/li>\n<\/ul>\n<p>\u0424\u0438\u043b\u044c\u0442\u0440\u044b \u2014 \u043e\u0434\u043d\u043e \u0438\u0437 \u043f\u0435\u0440\u0432\u044b\u0445 \u043c\u0435\u0441\u0442, \u0433\u0434\u0435 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u043e\u0449\u0443\u0449\u0430\u0442\u044c\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u044f\u0432\u043d\u043e.<\/p>\n<h4>6. Performance \u0438 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/h4>\n<p>\u0421\u043e \u0441\u0442\u0430\u0442\u0438\u043a\u043e\u0439 \u0432\u0441\u0451 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u044f\u0442\u043d\u043e: \u043c\u043e\u0436\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>\u0421 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 SVG \u0432\u0441\u0451 \u0441\u043b\u043e\u0436\u043d\u0435\u0435:<\/p>\n<ul>\n<li>\n<p>\u0447\u0430\u0441\u0442\u044c \u0434\u0435\u0440\u0435\u0432\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0447\u0430\u0441\u0442\u044c \u2014 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 frame;<\/p>\n<\/li>\n<li>\n<p>\u0447\u0430\u0441\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u0442\u0438\u043b\u0435\u0439;<\/p>\n<\/li>\n<li>\n<p>\u0447\u0430\u0441\u0442\u044c \u2014 \u043e\u0442 filter chain;<\/p>\n<\/li>\n<li>\n<p>\u0447\u0430\u0441\u0442\u044c \u2014 \u043e\u0442 transform state;<\/p>\n<\/li>\n<li>\n<p>\u0447\u0430\u0441\u0442\u044c \u2014 \u043e\u0442 timeline.<\/p>\n<\/li>\n<\/ul>\n<p>\u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0434\u0443\u043c\u0430\u0442\u044c \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u043b\u043e\u044f\u0445:<\/p>\n<ul>\n<li>\n<p>parse cache;<\/p>\n<\/li>\n<li>\n<p>DOM cache;<\/p>\n<\/li>\n<li>\n<p>computed style cache;<\/p>\n<\/li>\n<li>\n<p>picture cache;<\/p>\n<\/li>\n<li>\n<p>raster cache;<\/p>\n<\/li>\n<li>\n<p>\u0447\u0430\u0441\u0442\u0438\u0447\u043d\u0430\u044f invalidation.<\/p>\n<\/li>\n<\/ul>\n<p>\u0418 \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u0438\u0448\u0451\u043b \u043a \u0432\u044b\u0432\u043e\u0434\u0443, \u0447\u0442\u043e \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u0430\u043a\u0435\u0442\u0430 \u0431\u0435\u0441\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u043e \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u201c\u0441\u0440\u0435\u0434\u043d\u0438\u0439 FPS\u201d.<\/p>\n<p>\u0413\u043e\u0440\u0430\u0437\u0434\u043e \u0432\u0430\u0436\u043d\u0435\u0435:<\/p>\n<ul>\n<li>\n<p>cold parse time;<\/p>\n<\/li>\n<li>\n<p>warm render time;<\/p>\n<\/li>\n<li>\n<p>average frame time;<\/p>\n<\/li>\n<li>\n<p>p90 \/ p99;<\/p>\n<\/li>\n<li>\n<p>worst frame;<\/p>\n<\/li>\n<li>\n<p>jank frames;<\/p>\n<\/li>\n<li>\n<p>memory delta.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u043c\u0435\u0447\u0430\u0435\u0442 \u043d\u0435 \u201c\u0441\u0440\u0435\u0434\u043d\u044e\u044e \u0442\u0435\u043c\u043f\u0435\u0440\u0430\u0442\u0443\u0440\u0443 \u043f\u043e \u0431\u043e\u043b\u044c\u043d\u0438\u0446\u0435\u201d, \u0430 \u043b\u0430\u0433\u0438 \u0438 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u0438\u0437\u044b.<\/p>\n<h3>\u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0432 \u0434\u0432\u0443\u0445 \u0441\u043b\u043e\u0432\u0430\u0445<\/h3>\n<figure class=\"full-width \"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8a5\/2fc\/528\/8a52fc528286a3fdfebca7fd55200793.png\" width=\"1491\" height=\"1055\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/8a5\/2fc\/528\/8a52fc528286a3fdfebca7fd55200793.png 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/8a5\/2fc\/528\/8a52fc528286a3fdfebca7fd55200793.png 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<p>\u0415\u0441\u043b\u0438 \u043e\u0447\u0435\u043d\u044c \u0433\u0440\u0443\u0431\u043e, \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u043f\u0430\u0439\u043f\u043b\u0430\u0439\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<ol>\n<li>\n<p>SVG XML<\/p>\n<\/li>\n<li>\n<p>Parser<\/p>\n<\/li>\n<li>\n<p>SVG DOM<\/p>\n<\/li>\n<li>\n<p>Style resolver \/ computed styles<\/p>\n<\/li>\n<li>\n<p>Animation engine \/ timeline<\/p>\n<\/li>\n<li>\n<p>Render tree<\/p>\n<\/li>\n<li>\n<p>Painter \/ canvas layer<\/p>\n<\/li>\n<li>\n<p>Cache layer<\/p>\n<\/li>\n<li>\n<p>Flutter widget API<\/p>\n<\/li>\n<\/ol>\n<p>\u042d\u0442\u043e, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u0435, \u043d\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a\u0430\u044f \u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c, \u043f\u043e\u0447\u0435\u043c\u0443 \u0437\u0430\u0434\u0430\u0447\u0430 \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0448\u0438\u0440\u0435, \u0447\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u201c\u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u043a\u0442\u043e\u0440\u201d.<\/p>\n<h3>\u041a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043d\u0430\u0440\u0443\u0436\u0438<\/h3>\n<p>\u0421\u043d\u0430\u0440\u0443\u0436\u0438 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c API \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0443\u0437\u043d\u0430\u0432\u0430\u0435\u043c\u044b\u043c \u0434\u043b\u044f Flutter-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"dart\">FSvgPicture.asset('assets\/animated.svg')<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0418\u0434\u0435\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b migration path \u0431\u044b\u043b \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0438 \u043d\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b \u201c\u0443\u0447\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043c\u0438\u0440\u201d \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0434\u0438 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 SVG.<\/p>\n<h3>\u0413\u0434\u0435 \u0442\u0430\u043a\u043e\u0439 \u043f\u0430\u043a\u0435\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u0435\u043d<\/h3>\n<p>\u042f \u0432\u0438\u0436\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432.<\/p>\n<h4>1. Source of truth \u2014 \u0438\u043c\u0435\u043d\u043d\u043e SVG<\/h4>\n<p>\u042d\u0442\u043e \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0441\u043b\u0443\u0447\u0430\u0439.<\/p>\n<p>\u0422\u043e \u0435\u0441\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043d\u0435 \u0445\u043e\u0447\u0435\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c SVG \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0444\u043e\u0440\u043c\u0430\u0442, \u0430 \u0445\u043e\u0447\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442 \u043c\u0435\u0436\u0434\u0443 web \u0438 mobile.<\/p>\n<h4>2. Animated SVG \u0438\u0437 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0438\u043b\u0438 \u0432\u0435\u0431\u0430<\/h4>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0435 SVG, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0435\u0434\u0443\u0442 \u0441\u0435\u0431\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043a\u0430\u043a \u043d\u0443\u0436\u043d\u043e, \u0438 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u044c \u044d\u0442\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432\u043e Flutter.<\/p>\n<h4>3. SVG-heavy UI<\/h4>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<ul>\n<li>\n<p>\u043f\u0440\u043e\u043c\u043e-\u044d\u043a\u0440\u0430\u043d\u044b;<\/p>\n<\/li>\n<li>\n<p>dashboard-like \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b;<\/p>\n<\/li>\n<li>\n<p>\u0438\u0433\u0440\u043e\u0432\u044b\u0435 \/ iGaming-\u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b;<\/p>\n<\/li>\n<li>\n<p>\u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0438;<\/p>\n<\/li>\n<li>\n<p>\u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b.<\/p>\n<\/li>\n<\/ul>\n<h4>4. Edge cases, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043b\u043e\u0445\u043e \u0443\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u00ab\u043f\u0440\u043e\u0441\u0442\u043e \u0438\u043a\u043e\u043d\u043a\u0438\u00bb<\/h4>\n<p>Masks, filters, clipping, text, nested transforms, animation combinations \u2014 \u0432\u0441\u0451 \u044d\u0442\u043e \u043a\u0430\u043a \u0440\u0430\u0437 \u0442\u043e\u0442 \u043a\u043b\u0430\u0441\u0441 \u0437\u0430\u0434\u0430\u0447, \u0440\u0430\u0434\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u0437\u0430\u043c\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c renderer.<\/p>\n<h3>\u0413\u0434\u0435 \u043f\u0430\u043a\u0435\u0442, \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442, \u043d\u0435 \u043d\u0443\u0436\u0435\u043d<\/h3>\n<p>\u0412\u0430\u0436\u043d\u043e \u0447\u0435\u0441\u0442\u043d\u043e \u043f\u0440\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u0438 \u044d\u0442\u043e.<\/p>\n<p>\u042f \u0431\u044b <strong>\u043d\u0435 \u0442\u044f\u043d\u0443\u043b <\/strong><code><strong>full_svg_flutter<\/strong><\/code>, \u0435\u0441\u043b\u0438:<\/p>\n<ul>\n<li>\n<p>\u0443 \u0432\u0430\u0441 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 \u0438 \u0432\u0441\u0451 \u0443\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442;<\/p>\n<\/li>\n<li>\n<p>\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043f\u043e\u0434 Lottie;<\/p>\n<\/li>\n<li>\n<p>\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0432 Rive;<\/p>\n<\/li>\n<li>\n<p>\u0433\u0440\u0430\u0444\u0438\u043a\u0443 \u043c\u043e\u0436\u043d\u043e \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430 PNG\/WebP;<\/p>\n<\/li>\n<li>\n<p>UI-\u044d\u0444\u0444\u0435\u043a\u0442 \u043f\u0440\u043e\u0449\u0435, \u043d\u0430\u0434\u0451\u0436\u043d\u0435\u0435 \u0438 \u0434\u0435\u0448\u0435\u0432\u043b\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0442\u0438\u0432\u043d\u043e \u0432\u043e Flutter;<\/p>\n<\/li>\n<li>\n<p>\u0432\u0430\u0436\u043d\u0435\u0435 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u0430 \u0438 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u043a\u043b\u0430\u0434\u043d\u044b\u0435 \u0440\u0430\u0441\u0445\u043e\u0434\u044b, \u0447\u0435\u043c \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c SVG.<\/p>\n<\/li>\n<\/ul>\n<p>\u0418\u043d\u0430\u0447\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0442\u044f\u0436\u0451\u043b\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0442\u0430\u043c, \u0433\u0434\u0435 \u0437\u0430\u0434\u0430\u0447\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0449\u0435.<\/p>\n<h3>\u0427\u0442\u043e \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0441\u0430\u043c\u044b\u043c \u043d\u0435\u043e\u0436\u0438\u0434\u0430\u043d\u043d\u044b\u043c<\/h3>\n<p>\u041d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u0441\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u0435 \u0431\u044b\u043b\u043e \u0442\u0430\u043a\u0438\u043c:<\/p>\n<blockquote>\n<p>\u0447\u0435\u043c \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u0440\u043e\u0434\u0432\u0438\u0433\u0430\u0435\u0448\u044c\u0441\u044f, \u0442\u0435\u043c \u043c\u0435\u043d\u044c\u0448\u0435 \u044d\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u201c\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0434\u043b\u044f SVG\u201d \u0438 \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u2014 \u043d\u0430 \u043d\u0430\u0431\u043e\u0440 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u043f\u043e\u0434\u0441\u0438\u0441\u0442\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u0434\u0430\u043d\u043d\u043e\u0441\u0442\u044c.<\/p>\n<\/blockquote>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<ul>\n<li>\n<p>\u043f\u043e\u043a\u0430 \u043d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0448\u044c styles \u2014 \u0447\u0430\u0441\u0442\u044c SVG \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u043d\u043e;<\/p>\n<\/li>\n<li>\n<p>\u043f\u043e\u043a\u0430 \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u0448\u044c transform composition \u2014 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u043f\u043b\u044b\u0442\u044c \u0433\u0440\u0443\u043f\u043f\u044b;<\/p>\n<\/li>\n<li>\n<p>\u043f\u043e\u043a\u0430 \u043d\u0435 \u0442\u0440\u043e\u043d\u0435\u0448\u044c filters \u2014 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0443\u0436\u0435 \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0451 \u0433\u043e\u0442\u043e\u0432\u043e;<\/p>\n<\/li>\n<li>\n<p>\u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 production SVG, \u0432\u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u0441\u043b\u0430\u0431\u044b\u0435 \u043c\u0435\u0441\u0442\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0418 \u044d\u0442\u043e, \u043f\u043e\u0436\u0430\u043b\u0443\u0439, \u0433\u043b\u0430\u0432\u043d\u043e\u0435, \u0447\u0442\u043e \u043c\u043d\u0435 \u0434\u0430\u043b\u0430 \u0440\u0430\u0431\u043e\u0442\u0430 \u043d\u0430\u0434 \u043f\u0430\u043a\u0435\u0442\u043e\u043c: \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0443\u0432\u0430\u0436\u0435\u043d\u0438\u044f \u043a \u0442\u043e\u043c\u0443, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043d\u043e\u0433\u043e \u043b\u043e\u0433\u0438\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043f\u0440\u044f\u0447\u0443\u0442 \u043f\u043e\u0434 \u201c\u043d\u0443 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e SVG\u201d.<\/p>\n<hr\/>\n<h3>\u0427\u0442\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f<\/h3>\n<p>\u041d\u0430 \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u044d\u0442\u0430\u043f\u0435 \u044f \u0441\u0444\u043e\u043a\u0443\u0441\u0438\u0440\u043e\u0432\u0430\u043b\u0441\u044f \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043d\u0430\u0431\u043e\u0440\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439:<\/p>\n<ul>\n<li>\n<p>static SVG rendering;<\/p>\n<\/li>\n<li>\n<p>SMIL animations;<\/p>\n<\/li>\n<li>\n<p>CSS animations \/ keyframes;<\/p>\n<\/li>\n<li>\n<p>animated transforms;<\/p>\n<\/li>\n<li>\n<p>path morphing;<\/p>\n<\/li>\n<li>\n<p>gradients;<\/p>\n<\/li>\n<li>\n<p>masks and clipping;<\/p>\n<\/li>\n<li>\n<p>filters;<\/p>\n<\/li>\n<li>\n<p>text rendering;<\/p>\n<\/li>\n<li>\n<p>hit testing;<\/p>\n<\/li>\n<li>\n<p>accessibility support;<\/p>\n<\/li>\n<li>\n<p>familiar <code>SvgPicture<\/code>-style API.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0430\u043a\u0435\u0442:<br \/><a href=\"https:\/\/pub.dev\/packages\/full_svg_flutter\" rel=\"noopener noreferrer nofollow\">https:\/\/pub.dev\/packages\/full_svg_flutter<\/a><\/p>\n<hr\/>\n<h3>\u0427\u0442\u043e \u0445\u043e\u0447\u0443 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0430\u043b\u044c\u0448\u0435<\/h3>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u043d\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b \u0434\u0432\u0435 \u0432\u0435\u0449\u0438.<\/p>\n<h4>1. \u0420\u0435\u0430\u043b\u044c\u043d\u044b\u0435 edge cases<\/h4>\n<p>\u042f \u0445\u043e\u0447\u0443 \u043f\u0440\u043e\u0433\u043e\u043d\u044f\u0442\u044c \u043f\u0430\u043a\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0445 demo-assets, \u043d\u043e \u0438 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 SVG, \u043a\u043e\u0442\u043e\u0440\u044b\u0435:<\/p>\n<ul>\n<li>\n<p>\u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0432 Chrome\/Safari;<\/p>\n<\/li>\n<li>\n<p>\u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u043c\u0438 \u0432\u043e Flutter;<\/p>\n<\/li>\n<li>\n<p>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 SMIL \u0438\u043b\u0438 CSS animation;<\/p>\n<\/li>\n<li>\n<p>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 <code>mask<\/code>, <code>clipPath<\/code>, <code>filter<\/code>;<\/p>\n<\/li>\n<li>\n<p>\u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 <code>textPath<\/code>;<\/p>\n<\/li>\n<li>\n<p>\u043b\u043e\u043c\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u044b\u043a\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0444\u0438\u0447.<\/p>\n<\/li>\n<\/ul>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u2014 \u0431\u0443\u0434\u0443 \u043e\u0447\u0435\u043d\u044c \u0440\u0430\u0434, \u0435\u0441\u043b\u0438 \u0432\u044b \u0441\u043a\u0438\u043d\u0435\u0442\u0435 \u0438\u0445 \u0432 issues \u0438\u043b\u0438 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0438\u043b\u0438 \u043d\u0430 \u043f\u043e\u0447\u0442\u0443 denis.nadey@gmail.com \u0438\u043b\u0438 telegram @denisdandy<\/p>\n<hr\/>\n<h4>2. \u041f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 benchmark suite<\/h4>\n<p>\u042f \u0445\u043e\u0447\u0443 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043c\u044b\u0439 benchmark-\u043d\u0430\u0431\u043e\u0440, \u0447\u0442\u043e\u0431\u044b \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0435 \u043d\u0430 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u043e\u0435 \u201c\u0431\u044b\u0441\u0442\u0440\u043e\/\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u201d, \u0430 \u043d\u0430 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u044b\u0435 \u043c\u0435\u0442\u0440\u0438\u043a\u0438:<\/p>\n<ul>\n<li>\n<p>cold parse time;<\/p>\n<\/li>\n<li>\n<p>warm render time;<\/p>\n<\/li>\n<li>\n<p>dense list\/grid scenarios;<\/p>\n<\/li>\n<li>\n<p>scroll stress tests;<\/p>\n<\/li>\n<li>\n<p>animation frame stability;<\/p>\n<\/li>\n<li>\n<p>p90 \/ p99 frame timing;<\/p>\n<\/li>\n<li>\n<p>jank frames;<\/p>\n<\/li>\n<li>\n<p>memory delta.<\/p>\n<\/li>\n<\/ul>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a\u0438\u0435 \u0446\u0438\u0444\u0440\u044b \u0434\u0430\u044e\u0442 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u0442\u043e\u043c, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0436\u0438\u0437\u043d\u0435\u0441\u043f\u043e\u0441\u043e\u0431\u0435\u043d renderer \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435.<\/p>\n<hr\/>\n<h3>\u0418\u0442\u043e\u0433\u0438<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u043a\u043e\u0440\u043e\u0442\u043a\u043e, \u0442\u043e \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0432\u044b\u0432\u043e\u0434 \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u0442\u0430\u043a\u043e\u0439:<\/p>\n<p><strong>animated SVG \u2014 \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430, \u0430 \u0446\u0435\u043b\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u043f\u043e\u0434\u0441\u0438\u0441\u0442\u0435\u043c<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0443\u0436\u0435 \u0434\u0430\u0432\u043d\u043e \u0436\u0438\u0432\u0443\u0442 \u0432\u043c\u0435\u0441\u0442\u0435: DOM, styles, timeline, transforms, filters, render tree.<\/p>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u201c\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 SVG\u201d \u0438 \u201c\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 SVG \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043a\u0430\u043a \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\u201d \u2014 \u044d\u0442\u043e \u0437\u0430\u0434\u0430\u0447\u0438 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0440\u0430\u0437\u043d\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p><code>full_svg_flutter<\/code> \u2014 \u043c\u043e\u044f \u043f\u043e\u043f\u044b\u0442\u043a\u0430 \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u044c \u0432\u0442\u043e\u0440\u043e\u0435 \u0432\u043e Flutter.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 SVG, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043d\u043e \u043b\u043e\u043c\u0430\u044e\u0442\u0441\u044f \u0438\u043b\u0438 \u0443\u043f\u0440\u043e\u0449\u0430\u044e\u0442\u0441\u044f \u0432\u043e Flutter \u2014 \u043f\u0440\u0438\u0441\u044b\u043b\u0430\u0439\u0442\u0435.<br \/>\u0422\u0430\u043a\u0438\u0435 \u043a\u0435\u0439\u0441\u044b \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u0441\u0435\u0439\u0447\u0430\u0441 \u0446\u0435\u043d\u043d\u0435\u0435 \u043b\u044e\u0431\u043e\u0439 \u0441\u0438\u043d\u0442\u0435\u0442\u0438\u043a\u0438.<\/p>\n<p>\u0421\u0441\u044b\u043b\u043a\u0438:<\/p>\n<ul>\n<li>\n<p>Package: <a href=\"https:\/\/pub.dev\/packages\/full_svg_flutter\" rel=\"noopener noreferrer nofollow\">https:\/\/pub.dev\/packages\/full_svg_flutter<\/a><\/p>\n<\/li>\n<li>\n<p>GitHub: <a href=\"https:\/\/github.com\/denisnadey\/flutter_full_svg_support\" rel=\"noopener noreferrer nofollow\">https:\/\/github.com\/denisnadey\/flutter_full_svg_support<\/a><\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0442\u0435\u043c\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0438:<\/p>\n<ul>\n<li>\n<p>\u043a\u0430\u043a \u0443\u0441\u0442\u0440\u043e\u0435\u043d SVG animation timeline;<\/p>\n<\/li>\n<li>\n<p>path morphing: \u043f\u043e\u0447\u0435\u043c\u0443 \u043d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443 <code>d<\/code>;<\/p>\n<\/li>\n<li>\n<p>\u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 SVG CSS cascade;<\/p>\n<\/li>\n<li>\n<p>\u043a\u0430\u043a \u043c\u0435\u0440\u0438\u0442\u044c frame stability \u0432\u043e Flutter;<\/p>\n<\/li>\n<li>\n<p>\u043a\u0430\u043a \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c SVG renderer \u043d\u0430 production-\u0444\u0430\u0439\u043b\u0430\u0445.<\/p>\n<\/li>\n<\/ul>\n<\/div>\n<p>\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\/1030722\/\">https:\/\/habr.com\/ru\/articles\/1030722\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0414\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430: \u044f Flutter-\u0438\u043d\u0436\u0435\u043d\u0435\u0440 \u0438 \u0442\u0435\u0445\u043b\u0438\u0434, \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0433\u043e\u0434\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e \u0441 production-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u043d\u0430 Flutter \u2014 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u043c\u0438, web \u0438 \u0433\u0438\u0431\u0440\u0438\u0434\u043d\u044b\u043c\u0438. \u0412 \u043c\u043e\u0435\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0431\u044b\u043b\u0438 fintech, \u043c\u0430\u0440\u043a\u0435\u0442\u043f\u043b\u0435\u0439\u0441\u044b, food delivery \u0438 iGaming-\u043f\u0440\u043e\u0434\u0443\u043a\u0442\u044b, \u0433\u0434\u0435 \u043a UI \u043e\u0431\u044b\u0447\u043d\u043e \u043f\u0440\u0435\u0434\u044a\u044f\u0432\u043b\u044f\u044e\u0442 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0436\u0451\u0441\u0442\u043a\u0438\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f: \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0430, \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0438 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u0430\u044f \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0430 \u0444\u0438\u0447.full_flutter_svg (\u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 ai \u0438\u0437 \u043c\u0435\u043d\u044f \u043f\u043b\u043e\u0445\u043e\u0439 \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a)\u0412\u0435\u0431-\u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043e\u0442\u0434\u0430\u0451\u0442 SVG. \u0412 Chrome \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0412 Safari \u2014 \u0442\u043e\u0436\u0435.\u0412\u043e Flutter \u2014 \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443, \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f \u0438\u043b\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u0431\u0445\u043e\u0434\u043d\u044b\u0445 \u043f\u0443\u0442\u0435\u0439 \u0432\u0440\u043e\u0434\u0435 GIF, \u0432\u0438\u0434\u0435\u043e, Lottie \u0438\u043b\u0438 \u0440\u0443\u0447\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.\u042f \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u0440\u0435\u0448\u0438\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u043a\u043b\u0430\u0441\u0441 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0438 \u0432 \u0438\u0442\u043e\u0433\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043f\u0430\u043a\u0435\u0442 full_svg_flutter \u2014 SVG-\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u0434\u043b\u044f Flutter, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0442\u0430\u0440\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 SVG \u043a \u0442\u043e\u043c\u0443, \u043a\u0430\u043a \u0435\u0433\u043e \u043e\u0436\u0438\u0434\u0430\u0435\u0448\u044c \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043f\u043e\u0447\u0435\u043c\u0443 animated SVG \u2014 \u044d\u0442\u043e \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u201c\u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c path\u201d, \u043a\u0430\u043a\u0438\u0435 \u043f\u043e\u0434\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c, \u0433\u0434\u0435 \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e, \u0430 \u0433\u0434\u0435 \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0432\u0441\u0435\u043c \u0434\u0440\u0443\u0433\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b.\u0412 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442 \u044f \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u0437\u0430\u0434\u0430\u0447\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0432\u0443\u0447\u0438\u0442 \u043f\u0440\u043e\u0441\u0442\u043e: \u201c\u0432\u0437\u044f\u0442\u044c SVG, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0435\u0433\u043e \u0432\u043e Flutter\u201d. \u041d\u043e \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0435\u0441\u0442\u044c SMIL, CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, path morphing, masks, filters \u0438\u043b\u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438, \u044d\u0442\u043e \u0443\u0436\u0435 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430, \u0430 \u043f\u043e\u0447\u0442\u0438 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0439 \u043f\u0430\u0439\u043f\u043b\u0430\u0439\u043d.\u0422\u0430\u043a \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f full_svg_flutter \u2014 \u043c\u043e\u044f \u043f\u043e\u043f\u044b\u0442\u043a\u0430 \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 SVG \u0432\u043e Flutter \u043a \u0442\u043e\u043c\u0443, \u043a\u0430\u043a \u043c\u044b \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u0432\u0438\u0434\u0435\u0442\u044c \u0435\u0433\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.\u041f\u043e\u0447\u0435\u043c\u0443 animated SVG \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u043e Flutter \u00ab\u043a\u0430\u043a \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\u00bb \u2014 \u0438 \u043a\u0430\u043a \u044f \u043f\u043e\u043f\u044b\u0442\u0430\u043b\u0441\u044f \u044d\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u0412\u0435\u0431-\u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043e\u0442\u0434\u0430\u0451\u0442 SVG. \u0412 Chrome \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0412 Safari \u2014 \u0442\u043e\u0436\u0435. \u0412\u043e Flutter \u2014 \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443, \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f \u0438\u043b\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u0431\u0445\u043e\u0434\u043d\u044b\u0445 \u043f\u0443\u0442\u0435\u0439 \u0432\u0440\u043e\u0434\u0435 GIF, \u0432\u0438\u0434\u0435\u043e, Lottie \u0438\u043b\u0438 \u0440\u0443\u0447\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.\u042f \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u0440\u0435\u0448\u0438\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u043a\u043b\u0430\u0441\u0441 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0438 \u0432 \u0438\u0442\u043e\u0433\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043f\u0430\u043a\u0435\u0442 full_svg_flutter \u2014 SVG-\u0440\u0435\u043d\u0434\u0435\u0440\u0435\u0440 \u0434\u043b\u044f Flutter, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0442\u0430\u0440\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 SVG \u043a \u0442\u043e\u043c\u0443, \u043a\u0430\u043a \u0435\u0433\u043e \u043e\u0436\u0438\u0434\u0430\u0435\u0448\u044c \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.\u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443:\u043f\u043e\u0447\u0435\u043c\u0443 animated SVG \u2014 \u044d\u0442\u043e \u043d\u0435 \u201c\u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c path\u201d;\u043a\u0430\u043a\u0438\u0435 \u043f\u043e\u0434\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c;\u0433\u0434\u0435 \u0442\u0430\u043a\u043e\u0439 \u043f\u0430\u043a\u0435\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u0435\u043d;\u0433\u0434\u0435 \u043e\u043d, \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442, \u043d\u0435 \u043d\u0443\u0436\u0435\u043d;\u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u0432 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0448\u044c \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0435\u043b\u0430\u0435\u0448\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440.\u041f\u0430\u043a\u0435\u0442\u041e\u0442\u043a\u0443\u0434\u0430 \u0432\u043e\u043e\u0431\u0449\u0435 \u0431\u0435\u0440\u0451\u0442\u0441\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u0438\u043d\u043e\u0433\u0434\u0430 \u043c\u044b \u0434\u0430\u0436\u0435 \u043d\u0435 \u0432\u0438\u0434\u0438\u043c \u043d\u0438\u0447\u0435\u0433\u043e (\u0434\u0430\u0436\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043a\u0430\u0434\u0440\u0430)\u0415\u0441\u043b\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0435 SVG, \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 Flutter \u0434\u0430\u0432\u043d\u043e \u0443\u0436\u0435 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0437\u0430\u0434\u0430\u0447 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0445\u043e\u0440\u043e\u0448\u043e.\u041d\u043e\u00a0\u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u0447\u044c \u0437\u0430\u0445\u043e\u0434\u0438\u0442 \u043e \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 SVG \u0438\u0437\u00a0production,\u00a0\u0431\u044b\u0441\u0442\u0440\u043e \u0432\u044b\u044f\u0441\u043d\u044f\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u00ab\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 SVG\u00bb \u0438 \u00ab\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 SVG \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043a\u0430\u043a\u00a0\u0432\u00a0\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435\u00bb\u00a0\u2014 \u044d\u0442\u043e \u0441\u043e\u0432\u0441\u0435\u043c \u0440\u0430\u0437\u043d\u044b\u0435 \u0443\u0440\u043e\u0432\u043d\u0438.\u0422\u0438\u043f\u0438\u0447\u043d\u044b\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440 \u0438\u043b\u0438 \u0432\u0435\u0431-\u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043e\u0442\u0434\u0430\u0451\u0442 SVG;\u044d\u0442\u043e\u0442 SVG \u0443\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 web;\u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c: SMIL-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438,CSS keyframes,path morphing,masks,clipping,filters,text \/ textPath,nested transforms,defs, use, \u0441\u0441\u044b\u043b\u043a\u0438 \u043f\u043e id,\u0441\u0442\u0438\u043b\u0438, \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438, \u0438 \u0447\u0435\u0440\u0435\u0437 CSS;\u043f\u043e\u0442\u043e\u043c \u044d\u0442\u043e\u0442 \u0436\u0435 \u0444\u0430\u0439\u043b \u0445\u043e\u0442\u044f\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043e Flutter.\u0418 \u0432\u043e\u0442 \u0437\u0434\u0435\u0441\u044c \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435.\u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u201c\u043e\u0431\u044b\u0447\u043d\u044b\u043c SVG\u201d, \u043d\u0430 \u0434\u0435\u043b\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0434\u0430\u0432\u043d\u043e \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0441\u0430\u043c\u043e \u0441\u043e\u0431\u043e\u0439 \u0440\u0430\u0437\u0443\u043c\u0435\u044e\u0449\u0435\u0435\u0441\u044f.\u0427\u0442\u043e \u044f \u0445\u043e\u0442\u0435\u043b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432 \u0438\u0442\u043e\u0433\u0435\u0421\u043d\u0430\u0440\u0443\u0436\u0438 \u0437\u0430\u0434\u0430\u0447\u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e:FSvgPicture.asset(&#8216;assets\/animated.svg&#8217;)\u0418\u0434\u0435\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0443 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043d\u0443\u0436\u043d\u043e \u0434\u0443\u043c\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a:\u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u0442\u044c XML;\u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c DOM;\u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u0438;\u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u044c transform tree;\u043e\u0442\u0441\u043b\u0435\u0434\u0438\u0442\u044c timeline \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439;\u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c path data;\u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c filters;\u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0430 \u0447\u0442\u043e \u043d\u0430\u0434\u043e \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 frame.\u0412 \u0438\u0434\u0435\u0430\u043b\u0435 \u2014 \u043f\u0435\u0440\u0435\u0434\u0430\u043b SVG \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0431\u043b\u0438\u0437\u043a\u043e\u0435 \u043a \u043e\u0436\u0438\u0434\u0430\u0435\u043c\u043e\u043c\u0443.\u0421\u0440\u0430\u0437\u0443 \u0432\u0430\u0436\u043d\u0430\u044f \u043e\u0433\u043e\u0432\u043e\u0440\u043a\u0430: \u044d\u0442\u043e \u043d\u0435 \u00ab\u0437\u0430\u043c\u0435\u043d\u0430 \u0432\u043e\u043e\u0431\u0449\u0435 \u0432\u0441\u0435\u043c\u0443\u00bb\u042f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0445\u043e\u0447\u0443 \u043f\u0440\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u044d\u0442\u043e \u0432 \u043d\u0430\u0447\u0430\u043b\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u043d\u0430\u0447\u0435 \u0441\u0442\u0430\u0442\u044c\u044f \u043b\u0435\u0433\u043a\u043e \u0441\u043a\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043c\u0430\u0440\u043a\u0435\u0442\u0438\u043d\u0433.full_svg_flutter \u2014 \u044d\u0442\u043e \u043d\u0435 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u0435\u0440\u0435\u0431\u0440\u044f\u043d\u0430\u044f \u043f\u0443\u043b\u044f.\u0415\u0441\u043b\u0438 \u043a\u043e\u0440\u043e\u0442\u043a\u043e:flutter_svg \u2014 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0445 SVG-\u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432;Lottie \u2014 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442, \u0435\u0441\u043b\u0438 source of truth \u0443 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0438\u043c\u0435\u043d\u043d\u043e Lottie;Rive \u2014 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442, \u0435\u0441\u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0441\u0434\u0435\u043b\u0430\u043d\u0430 \u0432 Rive;PNG\/WebP \u2014 \u0438\u043d\u043e\u0433\u0434\u0430 \u0432\u043e\u043e\u0431\u0449\u0435 \u043b\u0443\u0447\u0448\u0438\u0439 \u043e\u0442\u0432\u0435\u0442, \u0435\u0441\u043b\u0438 \u0437\u0430\u0434\u0430\u0447\u0430 \u0447\u0438\u0441\u0442\u043e \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u043d\u0435 \u043d\u0443\u0436\u043d\u0430.\u041c\u043e\u0439 use case \u0434\u0440\u0443\u0433\u043e\u0439:SVG \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043a\u0430\u043a \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442. \u041e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0418 \u0445\u043e\u0447\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 SVG \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0432\u043e Flutter \u0431\u0435\u0437 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438 \u0432 GIF, \u0432\u0438\u0434\u0435\u043e \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u043e\u0439 \u0444\u043e\u0440\u043c\u0430\u0442.\u041f\u043e\u0447\u0435\u043c\u0443 animated SVG \u2014 \u044d\u0442\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0447\u0435\u043c \u043a\u0430\u0436\u0435\u0442\u0441\u044f\u041d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043a\u0430\u0436\u0435\u0442\u0441\u044f: \u043d\u0443 \u0447\u0442\u043e \u0442\u0430\u043c, SVG &#8212; \u044d\u0442\u043e \u0436\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0435\u043a\u0442\u043e\u0440.\u041d\u043e\u00a0\u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0448\u044c \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430\u00a0\u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b, \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u044f\u0441\u043d\u043e, \u0447\u0442\u043e\u00a0SVG\u00a0\u2014 \u044d\u0442\u043e \u043d\u0435\u00a0\u043f\u0440\u043e\u0441\u0442\u043e \u00ab\u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0431\u043e\u0440 path\u2011\u043e\u0432\u00bb.\u042d\u0442\u043e \u0441\u0440\u0430\u0437\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u043e\u0451\u0432:\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043d\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430;\u0441\u0442\u0438\u043b\u0438 \u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435;\u0441\u0441\u044b\u043b\u043a\u0438 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438;\u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442;\u0442\u0430\u0439\u043c\u043b\u0430\u0439\u043d \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439;\u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438;\u0444\u0438\u043b\u044c\u0442\u0440\u044b;\u0442\u0435\u043a\u0441\u0442;\u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438;\u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0435\u0440\u0435\u0432\u0430;\u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435.\u0422\u043e \u0435\u0441\u0442\u044c \u043f\u043e \u0441\u0443\u0442\u0438 \u0442\u044b \u0438\u043c\u0435\u0435\u0448\u044c \u0434\u0435\u043b\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u043e\u0439, \u0430 \u0441 \u0447\u0435\u043c-\u0442\u043e \u043c\u0435\u0436\u0434\u0443:DOM,style engine,animation engine,render tree.\u0418 \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 SVG-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u044d\u0442\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u0437\u0430\u043c\u0435\u0442\u043d\u043e.\u041a\u0430\u043a\u0438\u0435 \u0444\u0438\u0447\u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 SVG \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u043b\u043e\u043c\u0430\u044e\u0442 \u00ab\u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u00bb\u0412\u043e\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430\u0434\u0430\u0447\u0443 \u043d\u0435\u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u043e\u0439:&lt;animate&gt;&lt;animateTransform&gt;&lt;animateMotion&gt;CSS @keyframespath morphinganimated opacity, fill, stroke, transformmasks \/ clipPathfiltersgradientsdefs \/ usenested groupstext, tspan, textPathpresentation attributes + inline style + CSS inside &lt;style&gt;inheritance \/ cascade\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432\u0441\u0435 \u044d\u0442\u0438 \u0432\u0435\u0449\u0438 \u043d\u0435 \u0436\u0438\u0432\u0443\u0442 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e.\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:\u043d\u0430 \u0433\u0440\u0443\u043f\u043f\u0443 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0430\u0432\u0435\u0448\u0430\u043d transform;\u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0451 \u2014 mask;\u0432\u043d\u0443\u0442\u0440\u0438 mask \u2014 \u0435\u0449\u0451 \u043e\u0434\u0438\u043d shape;\u0443 shape \u0446\u0432\u0435\u0442 \u0437\u0430\u0434\u0430\u043d \u0447\u0435\u0440\u0435\u0437 CSS-\u043a\u043b\u0430\u0441\u0441;\u0441\u0430\u043c \u043a\u043b\u0430\u0441\u0441 \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 keyframes;\u0430 \u043f\u043e\u0432\u0435\u0440\u0445 \u0435\u0449\u0451 \u043f\u0440\u0438\u043c\u0435\u043d\u0451\u043d filter.\u0422\u043e \u0435\u0441\u0442\u044c \u201c\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043e\u0434\u043d\u0443 \u0444\u0438\u0447\u0443\u201d \u0447\u0430\u0441\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043d\u0430\u0434\u043e \u0443\u0436\u0435 \u0438\u043c\u0435\u0442\u044c \u043f\u043e\u043b-\u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0439 \u043c\u043e\u0434\u0435\u043b\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430.\u0427\u0442\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u04381. SVG DOM\u041f\u0435\u0440\u0432\u043e\u0435, \u0431\u0435\u0437 \u0447\u0435\u0433\u043e \u0432\u0441\u0451 \u0431\u044b\u0441\u0442\u0440\u043e \u0440\u0430\u0437\u0432\u0430\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u2014 \u044d\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 DOM.\u041d\u0443\u0436\u043d\u043e \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u0442\u044c XML \u0432 \u043d\u0430\u0431\u043e\u0440 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0430 \u0438\u043c\u0435\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u0433\u0434\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0437\u043d\u0430\u0435\u0442:\u0441\u0432\u043e\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b;\u0434\u0435\u0442\u0435\u0439;\u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f;id, class;computed style;transform;paint properties;visibility \/ display;\u0441\u0432\u044f\u0437\u0438 \u0441 defs, use, clipPath, mask, gradients \u0438 filters.\u0411\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0434\u0430\u0436\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u043d\u0435 \u0433\u043e\u0432\u043e\u0440\u044f \u0443\u0436\u0435 \u043e\u0431 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438.2. Style resolution \u0438 \u043a\u0430\u0441\u043a\u0430\u0434\u041e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043a\u043e\u0432\u0430\u0440\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u0435\u0439 SVG \u2014 \u0441\u0442\u0438\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u044c \u043e\u0442\u043e\u0432\u0441\u044e\u0434\u0443.\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 fill \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0437\u0430\u0434\u0430\u043d \u0442\u0430\u043a:&lt;path fill=&#187;red&#187; \/&gt;\u0438\u043b\u0438 \u0442\u0430\u043a:&lt;path style=&#187;fill:red;&#187; \/&gt;\u0438\u043b\u0438 \u0442\u0430\u043a:&lt;style&gt;  .logo-shape {    fill: red;  }&lt;\/style&gt;&lt;path class=&#187;logo-shape&#187; \/&gt;\u0418 \u0432\u0441\u0451 \u044d\u0442\u043e \u0435\u0449\u0451 \u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c\u0441\u044f.\u0415\u0441\u043b\u0438 \u043d\u0435 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0441\u043b\u043e\u0439 computed styles, \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u0441\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u044b: \u0432 \u043e\u0434\u043d\u043e\u043c SVG \u0447\u0442\u043e-\u0442\u043e \u043a\u0440\u0430\u0441\u0438\u0442\u0441\u044f \u043d\u0435 \u0442\u0435\u043c \u0446\u0432\u0435\u0442\u043e\u043c, \u0432 \u0434\u0440\u0443\u0433\u043e\u043c \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f stroke, \u0432 \u0442\u0440\u0435\u0442\u044c\u0435\u043c \u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441\u044b.3. \u0422\u0430\u0439\u043c\u043b\u0430\u0439\u043d \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439\u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f SMIL \u0438\u043b\u0438 CSS-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f, \u043d\u0443\u0436\u043d\u0430 \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438.\u0422\u043e \u0435\u0441\u0442\u044c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u201c\u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0435 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438\u201d.\u041d\u0443\u0436\u043d\u043e \u0443\u043c\u0435\u0442\u044c:\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438;\u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0442\u044c \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438;\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c begin, dur, repeatCount, repeatDur, fill;\u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f;\u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c easing \/ splines;\u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043a \u0446\u0435\u043b\u0435\u0432\u043e\u043c\u0443 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0443;\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c render state.\u0418 \u0432\u0441\u0451 \u044d\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0441 frame lifecycle Flutter.4. Path morphingPath morphing \u2014 \u043e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u0438 \u0431\u043e\u043b\u0435\u0437\u043d\u0435\u043d\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u0435\u0432.\u0415\u0441\u043b\u0438 \u043e\u0447\u0435\u043d\u044c \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c, \u0442\u043e \u043c\u0430\u043b\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0437\u044f\u0442\u044c \u0434\u0432\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0441 d=&#187;&#187; \u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u201c\u0441\u043c\u0435\u0448\u0430\u0442\u044c\u201d \u0447\u0438\u0441\u043b\u0430.\u0427\u0442\u043e\u0431\u044b morphing \u0431\u044b\u043b \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u044b\u043c, \u043d\u0443\u0436\u043d\u043e:\u0440\u0430\u0441\u043f\u0430\u0440\u0441\u0438\u0442\u044c path data;\u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u044b;\u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043a \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u043c\u0443 \u0432\u0438\u0434\u0443;\u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b path-\u043e\u0432 \u0441\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043c\u044b;\u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043a\u043e\u043c\u0430\u043d\u0434;\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043e\u0431\u0440\u0430\u0442\u043d\u043e.\u041d\u0430 \u0434\u0435\u043c\u043e-\u0444\u0430\u0439\u043b\u0430\u0445 \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u201c\u043f\u043e\u0447\u0442\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c\u201d \u0431\u044b\u0441\u0442\u0440\u043e.\u041d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 SVG \u2014 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0432\u0435\u0441\u0435\u043b\u044c\u0435.5. FiltersSVG-\u0444\u0438\u043b\u044c\u0442\u0440\u044b \u2014 \u044d\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u0438\u0440.\u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0431\u0440\u0430\u0442\u044c \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0432\u0435\u0449\u0438 \u0432\u0440\u043e\u0434\u0435 blur, color matrix, blend\/composite \u0438\u043b\u0438 drop shadow, \u0431\u044b\u0441\u0442\u0440\u043e \u0432\u044b\u044f\u0441\u043d\u044f\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432\u043e\u043f\u0440\u043e\u0441 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439, \u043d\u043e \u0438 \u0432 \u0442\u043e\u043c:\u043a\u0430\u043a \u0441\u0447\u0438\u0442\u0430\u0442\u044c bounds;\u043a\u0430\u043a \u043d\u0435 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043c\u043d\u043e\u0433\u043e;\u043a\u0430\u043a \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442;\u043a\u0430\u043a \u043f\u0435\u0440\u0435\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e, \u0447\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c;\u043a\u0430\u043a \u043d\u0435 \u0443\u0431\u0438\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043d\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u0445.\u0424\u0438\u043b\u044c\u0442\u0440\u044b \u2014 \u043e\u0434\u043d\u043e \u0438\u0437 \u043f\u0435\u0440\u0432\u044b\u0445 \u043c\u0435\u0441\u0442, \u0433\u0434\u0435 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442 \u043e\u0449\u0443\u0449\u0430\u0442\u044c\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u044f\u0432\u043d\u043e.6. Performance \u0438 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u0421\u043e \u0441\u0442\u0430\u0442\u0438\u043a\u043e\u0439 \u0432\u0441\u0451 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u044f\u0442\u043d\u043e: \u043c\u043e\u0436\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c.\u0421 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 SVG \u0432\u0441\u0451 \u0441\u043b\u043e\u0436\u043d\u0435\u0435:\u0447\u0430\u0441\u0442\u044c \u0434\u0435\u0440\u0435\u0432\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u043e\u0439;\u0447\u0430\u0441\u0442\u044c \u2014 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043a\u0430\u0436\u0434\u044b\u0439 frame;\u0447\u0430\u0441\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0441\u0442\u0438\u043b\u0435\u0439;\u0447\u0430\u0441\u0442\u044c \u2014 \u043e\u0442 filter chain;\u0447\u0430\u0441\u0442\u044c \u2014 \u043e\u0442 transform state;\u0447\u0430\u0441\u0442\u044c \u2014 \u043e\u0442 timeline.\u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0434\u0443\u043c\u0430\u0442\u044c \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u043b\u043e\u044f\u0445:parse cache;DOM cache;computed style cache;picture cache;raster cache;\u0447\u0430\u0441\u0442\u0438\u0447\u043d\u0430\u044f invalidation.\u0418 \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u0438\u0448\u0451\u043b \u043a \u0432\u044b\u0432\u043e\u0434\u0443, \u0447\u0442\u043e \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u0430\u043a\u0435\u0442\u0430 \u0431\u0435\u0441\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u043e \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u201c\u0441\u0440\u0435\u0434\u043d\u0438\u0439 FPS\u201d.\u0413\u043e\u0440\u0430\u0437\u0434\u043e \u0432\u0430\u0436\u043d\u0435\u0435:cold parse time;warm render time;average frame time;p90 \/ p99;worst frame;jank frames;memory delta.\u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u043c\u0435\u0447\u0430\u0435\u0442 \u043d\u0435 \u201c\u0441\u0440\u0435\u0434\u043d\u044e\u044e \u0442\u0435\u043c\u043f\u0435\u0440\u0430\u0442\u0443\u0440\u0443 \u043f\u043e \u0431\u043e\u043b\u044c\u043d\u0438\u0446\u0435\u201d, \u0430 \u043b\u0430\u0433\u0438 \u0438 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u0438\u0437\u044b.\u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0432 \u0434\u0432\u0443\u0445 \u0441\u043b\u043e\u0432\u0430\u0445\u0415\u0441\u043b\u0438 \u043e\u0447\u0435\u043d\u044c \u0433\u0440\u0443\u0431\u043e, \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u043f\u0430\u0439\u043f\u043b\u0430\u0439\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:SVG XMLParserSVG DOMStyle resolver \/ computed stylesAnimation engine \/ timelineRender treePainter \/ canvas layerCache layerFlutter widget API\u042d\u0442\u043e, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u0435, \u043d\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a\u0430\u044f \u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043e\u0431\u044a\u044f\u0441\u043d\u0438\u0442\u044c, \u043f\u043e\u0447\u0435\u043c\u0443 \u0437\u0430\u0434\u0430\u0447\u0430 \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0448\u0438\u0440\u0435, \u0447\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u201c\u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0432\u0435\u043a\u0442\u043e\u0440\u201d.\u041a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043d\u0430\u0440\u0443\u0436\u0438\u0421\u043d\u0430\u0440\u0443\u0436\u0438 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c API \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0443\u0437\u043d\u0430\u0432\u0430\u0435\u043c\u044b\u043c \u0434\u043b\u044f Flutter-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430.\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:FSvgPicture.asset(&#8216;assets\/animated.svg&#8217;)\u0418\u0434\u0435\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b migration path \u0431\u044b\u043b \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0438 \u043d\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b \u201c\u0443\u0447\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043c\u0438\u0440\u201d \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0434\u0438 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 SVG.\u0413\u0434\u0435 \u0442\u0430\u043a\u043e\u0439 \u043f\u0430\u043a\u0435\u0442 \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u0435\u043d\u042f \u0432\u0438\u0436\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432.1. Source of truth \u2014 \u0438\u043c\u0435\u043d\u043d\u043e SVG\u042d\u0442\u043e \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0441\u043b\u0443\u0447\u0430\u0439.\u0422\u043e \u0435\u0441\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043d\u0435 \u0445\u043e\u0447\u0435\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c SVG \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0444\u043e\u0440\u043c\u0430\u0442, \u0430 \u0445\u043e\u0447\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442 \u043c\u0435\u0436\u0434\u0443 web \u0438 mobile.2. Animated SVG \u0438\u0437 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0438\u043b\u0438 \u0432\u0435\u0431\u0430\u041a\u043e\u0433\u0434\u0430 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u044b\u0435 SVG, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0435\u0434\u0443\u0442 \u0441\u0435\u0431\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043a\u0430\u043a \u043d\u0443\u0436\u043d\u043e, \u0438&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-478334","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/478334","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=478334"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/478334\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=478334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=478334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=478334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}