{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Привет! Сегодня рассмотрим, как правильно размещать svg-иконки на странице Inline-методом. Рассмотрим, как быть, когда валидатор ругается на одинаковые id. Поехали! ","type":"unstyled","key":"7654g"},{"data":{"image":{"id":"5cbd8d4472ca0a00b26c9c4c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"f51on"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" \nИтак, как вставить svg в html. Ну, на самом деле все довольно просто. Если Вы хотите вставить — берете и вставляете. ","type":"unstyled","key":"323db"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"66ngc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":1,"style":"BOLD"},{"length":3,"offset":22,"style":"BOLD"},{"length":3,"offset":1848,"style":"BOLD"},{"length":3,"offset":1856,"style":"BOLD"},{"length":3,"offset":1968,"style":"BOLD"},{"length":3,"offset":1975,"style":"BOLD"}],"text":"

\n \n

\n Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, laudantium.\n

","type":"blockquote","key":"1vpc3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"9lqnq"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":13,"offset":162}],"inlineStyleRanges":[{"length":13,"offset":162,"style":"UNDERLINE"}],"text":"Такой метод максимально простой и рабочий. Здесь важно понимать, что нужно оптимизировать svg перед вставкой. Убрать лишний код. Отчасти, тут может помочь сервис svg-optimizer, отчасти придется самому что-то делать. Рекомендую так же избегать масок внутри svg и удалять их.","type":"unstyled","key":"1q96d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Да, в целом это все просто, но естественно я бы не стал делать статью, если бы не было каких-то подводных камней. Но, сперва, о стилизации.","type":"unstyled","key":"douql"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS","type":"header-two","key":"8uool"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"1f0s1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":6,"style":"BOLD"},{"length":7,"offset":19,"style":"BOLD"},{"length":11,"offset":59,"style":"BOLD"},{"length":7,"offset":97,"style":"BOLD"},{"length":6,"offset":164,"style":"BOLD"},{"length":5,"offset":193,"style":"BOLD"},{"length":6,"offset":209,"style":"BOLD"},{"length":6,"offset":251,"style":"BOLD"},{"length":5,"offset":456,"style":"BOLD"},{"length":6,"offset":474,"style":"BOLD"},{"length":6,"offset":493,"style":"BOLD"},{"length":7,"offset":557,"style":"BOLD"},{"length":5,"offset":579,"style":"BOLD"},{"length":6,"offset":598,"style":"BOLD"},{"length":9,"offset":670,"style":"BOLD"},{"length":10,"offset":691,"style":"BOLD"},{"length":10,"offset":715,"style":"BOLD"}],"text":"* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: sans-serif;\n}\n \nbody {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100vh;\n}\n \n.item {\n width: 500px;\n height: 400px;\n transition: all 0.15s;\n cursor: pointer;\n \n &:hover {\n transition: all 0.15s;\n .item__icon {\n transition: all 0.15s;\n svg {\n transition: all 0.15s;\n fill: red;\n }\n }\n }\n \n &__icon {\n width: 200px;\n height: 200px;\n margin: 0 auto;\n transition: all 0.15s;\n \n svg {\n display: block;\n width: 100%;\n height: 100%;\n transition: all 0.15s;\n }\n }\n \n &__text {\n font-size: 20px;\n text-align: center;\n margin-top: 20px;\n }\n}","type":"blockquote","key":"5tfso"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Как видно, мы можем сделать прекрасную адаптивную свгшку и использовать ее где нам надо. А так же, преимущество использования svg налицо — можно очень легко и просто менять заливку элемента. При наведении, или любом другом действии. Спойлер: на этой же неделе (в пятницу) выйдет статья про использование svg карты России (как сделать ее кликабельной, сделать у нее боковое меню и при наведении менять цвета). ","type":"unstyled","key":"9mote"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Зачем все это?","type":"header-two","key":"3ntro"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":66,"style":"BOLD"},{"length":6,"offset":137,"style":"BOLD"}],"text":" Все что было до этого — весьма тривиально и просто. Ну, поменять fill при ховере несложно. А вот следующий шаг — это использование тега symbol и создания целых svg-спрайтов. ","type":"unstyled","key":"dgage"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML (для спрайтов)","type":"header-two","key":"c41ol"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"93mbt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":1783,"style":"BOLD"},{"length":3,"offset":1804,"style":"BOLD"},{"length":3,"offset":1891,"style":"BOLD"},{"length":3,"offset":1899,"style":"BOLD"},{"length":3,"offset":2011,"style":"BOLD"},{"length":3,"offset":2018,"style":"BOLD"},{"length":3,"offset":2024,"style":"BOLD"},{"length":3,"offset":2045,"style":"BOLD"},{"length":3,"offset":2132,"style":"BOLD"},{"length":3,"offset":2140,"style":"BOLD"},{"length":3,"offset":2252,"style":"BOLD"},{"length":3,"offset":2259,"style":"BOLD"}],"text":"\n \n

\n \n

\n Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, laudantium.\n

\n \n

\n Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, laudantium.\n

","type":"blockquote","key":"7fp4d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"al07v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":230,"style":"BOLD"}],"text":"В чем суть и для чего это: представим, что у вас на странице есть много (2 и больше) элемента, который использует одну и ту же svg иконку. Допустим, это товары магазина, и на кнопке покупке стоит иконка в svg. Поскольку svg имеет id (и зачастую использует его для отображения svg-элемента), мы уже не можем просто так размножить эту иконку. Валидатор начнет грубо ругаться на дубликаты в id.","type":"unstyled","key":"5hbca"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ну, и просто будет слишком много кода, если постоянно копировать код большой свгшки снова и снова.","type":"unstyled","key":"ff2uh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":144,"style":"BOLD"},{"length":6,"offset":171,"style":"BOLD"},{"length":6,"offset":215,"style":"BOLD"},{"length":7,"offset":242,"style":"BOLD"},{"length":2,"offset":252,"style":"BOLD"},{"length":2,"offset":323,"style":"BOLD"},{"length":23,"offset":358,"style":"BOLD"},{"length":3,"offset":550,"style":"BOLD"}],"text":"По HTML-коду видно решение — использование спрайтов через тег symbol. Мы создаем в начале страницы (ну или лучше в отдельном файле) скрытый тег