SVG има много готин и мощен елемент, наречен . Това е доста просто в концепция. Той намира друг бит SVG код, посочен от ID, и го клонира вътре в елемента.
Най-основният случай на употреба би бил: Вече нарисувах тази форма (и) веднъж на страницата и искам да я нарисувам отново някъде другаде. Вземете тази форма (и) и я нарисувайте отново.
Можем да използваме тази способност като основна концепция за (drumroll!) И цяла система от икони! Можем да вземем всички фигури, които възнамеряваме да използваме на страницата, в един голям SVG блок. Ще ги опаковаме всички в таг, който е семантичен начин да кажем „Ние просто дефинираме тези неща, които да използваме по-късно.“ Той също така гарантира, че те не се показват (но вие също трябва да display: none;за себе си.
Работи по следния начин:
Този фънки изглеждащ xlink:hrefатрибут препраща идентификатор другаде. Този идентификатор може да бъде върху всеки елемент на форма, като или , или може да бъде върху група от елементи като .
Най-доброто от всичко в случай на система от икони, тя може да бъде върху елемент. Освен че е правилно семантично (иконата е символ, не?), Елементът може да носи свой атрибут viewBox и информация за достъпност, като и тагове. Това прави внедряването много лесно (както е показано по-горе).
Така че просто трябва да се уверите, че това е дефинирано някъде другаде в документа:
Basketball Вижте Pen JoDmd от Chris Coyier (@chriscoyier) на CodePen.