След като получим това, което наричаме „defs block“ на SVG - тази част от SVG, която определя всички неща, които искаме да нарисуваме по-късно - къде да го поставим? Досега сме го поставяли директно в HTML и това абсолютно работи. Ако го оставим в горната част на страницата, кажете непосредствено след началния маркер:
Това ще работи чудесно във всички браузъри, които поддържат SVG.
Може да е изкушаващо да преместите това надолу. Може би иконите не са изключително жизненоважни за страницата, а не толкова жизненоважни, колкото реалното съдържание, което са предназначени да доставят, така че вместо това преместваме иконите в долната част на страницата, като отлагаме зареждането им, както често правим с JavaScript. Опитваме това във видеото, но има проблеми с рендирането на Safari иконите, които по-късно се опитахме изобщо. За да бъда честен, виждал съм противоречиво поведение или различни типове в други браузъри, като го правя по този начин и изглежда пейзажът се променя малко в това отношение. Така че чух: е трудно нещо за изпълнение. Най-сигурно е да поставите блока в горната част, ако в крайна сметка държите дефовете точно в документите си.
В това видео разглеждаме някои основни тестове на всичко това и след това разглеждаме реални уебсайтове, които използват тази система и как / къде вмъкват svg defs блока.
Вижте писалката 954e71cb5d5e79fb61d3c89bb3f21b8a от Chris Coyier (@chriscoyier) на CodePen.
Забележка
Харесва ми терминът „SVG defs block“ - само за да можем да го наречем нещо, което има конкретна цел, но всъщност няма официално име. Но не винаги трябва да използвате таг. Когато използвате s, те така или иначе не се изобразяват сами и наистина не мисля, че трябва да са вътре . Чувал съм, че дефинициите на градиенти в SVG са еднакви и дори няма да работят, ако са в . Независимо от това, той все още е „блок на SVG код, който просто определяме да използваме по-късно“, така че вероятно ще продължа да го наричам „SVG defs block“.