SVG'nin çok havalı ve güçlü bir öğesi vardır . Konsept olarak oldukça basit. ID ile başvurulan başka bir SVG kodu biti bulur ve bunu öğenin içinde klonlar .
En temel kullanım durumu şudur: Bu şekilleri zaten sayfaya bir kez çizdim ve başka bir yerde tekrar çizmek istiyorum. Git o şekilleri al ve tekrar çiz.
Bu yeteneği (drumroll!) Ve tüm ikon sistemi için kök konsept olarak kullanabiliriz! Sayfada kullanmak istediğimiz tüm şekilleri büyük bir SVG bloğunda alabiliriz. Hepsini daha sonra kullanacağımız şeyleri tanımlamanın anlamsal bir yolu olan bir etikete saracağız. Ayrıca emin onlar işlemek olmaz yapar (ama aynı zamanda gerektiği kendisi.display: none;
Şu şekilde çalışır:
Bu garip görünümlü xlink:hrefözellik, başka bir yerde bir kimliği referans alıyor. Bu ID gibi bir herhangi bir şekil elemanı üzerinde olabilir ya da , ya da bir benzeri eleman bir grup olabilir .
Hepsinden iyisi, bir ikon sistemi durumunda, bir eleman üzerinde olabilir . Öğe, anlamsal olarak doğru olmasının yanı sıra (simge bir semboldür, hayır?), Öğe kendi viewBox niteliğini ve erişilebilirlik bilgilerini, örneğin ve etiketleri taşıyabilir . Bu, uygulamayı çok kolaylaştırır (yukarıda gösterildiği gibi).
Dolayısıyla, bunun belgede başka bir yerde tanımlandığından emin olmanız yeterlidir:
Basketball CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen JoDmd'ye bakın.