Когда у нас есть то, что мы называем нашим «блоком defs» SVG - этот фрагмент SVG, который определяет все, что мы хотим нарисовать позже - куда мы его поместим? До сих пор мы помещали его прямо в HTML, и это абсолютно работает. Если мы оставим его вверху страницы, скажем сразу после открывающего тега:
Это будет отлично работать во всех браузерах, поддерживающих SVG.
Может возникнуть соблазн снизить это значение. Возможно, значки не очень важны для страницы, не так важны, как реальный контент, который они должны предоставлять на странице, поэтому вместо этого мы перемещаем значки в нижнюю часть страницы, откладывая их загрузку, как мы часто делаем с JavaScript. Мы пробуем это в видео, но у Safari есть проблемы с отображением значков, которые мы позже пытались сделать . Честно говоря, я видел непоследовательное поведение или различные типы в других браузерах, которые делали это таким образом, и, похоже, ситуация в этом отношении немного изменилась. Итак, я слышал: это сложно реализовать. Безопаснее всего поместить блок наверху, если вы в конечном итоге сохраните определения прямо в своих документах.
В этом видео мы рассмотрим базовое тестирование всего этого, а затем рассмотрим некоторые реальные веб-сайты, которые используют эту систему, и то, как / куда они вставляют блок svg defs.
См. Pen 954e71cb5d5e79fb61d3c89bb3f21b8a Криса Койера (@chriscoyier) на CodePen.
Примечание
Мне нравится термин «блок SVG defs» - просто потому, что мы можем назвать его чем-то, что имеет конкретное назначение, но на самом деле не имеет официального названия. Но вам не всегда нужно использовать тег. Когда вы используете s, они все равно не обрабатываются сами по себе, и я действительно не думаю, что они должны быть внутри . Я слышал, что определения градиентов в SVG одинаковы и даже не будут работать, если они находятся в . Тем не менее, это все еще «блок кода SVG, который мы просто определяем для использования позже», поэтому я, вероятно, буду называть его «блоком SVG defs».