Grafiği bir SVG <symbol> içinde bir kez tanımlayın, ardından kimliğine her görünür SVG’nin içindeki <use> ile başvurun. Her örneğe kendi boyutunu verin ve çevresindeki sayfayı CSS ile düzenleyin. SVG belge yapısı.

Bu eğitim, bir Mac’te HTML sayfası düzenleyen ve aynı küçük grafiği birkaç metin etiketinin yanında kullanmak isteyenlere yöneliktir. Tam örnekte yapay karolar, sıradan HTML ve CSS kullanılır. Herhangi bir çerçeveye, JavaScript’e, indirilen görsellere veya derleme adımına gerek yoktur.

Tek bir sembol nasıl birkaç görünür grafik oluşturur?

<symbol> bir grafik şablonudur. Kendi başına görüntülenmez; <use> başvurusu görünür bir örnek oluşturur. Tanımı belgede bir kez bulundurun, ardından grafiğin yer alacağı her yere küçük bir SVG kapsayıcısı ekleyin. MDN, her iki öğenin de yaygın olarak kullanılabildiğini belirtir. MDN: symbol.

Tekrarlanan yazılmış yolları önlemek ile tarayıcının işleme yükünü önlemek arasındaki önemli farkı göz önünde bulundurun. HTML’nizde tek bir yol tanımı bulunur, ancak tarayıcı her <use> için işlenmiş bir örnek oluşturmaya devam eder. MDN bunu, dışarıya açılmayan DOM’a klonlama olarak açıklar. Yeniden kullanım kaynak kodunun bakımını kolaylaştırır; birkaç görünür grafiğin tek bir işlenmiş nesneye dönüşmesi anlamına gelmez. MDN: use.

Etiketler ve simgeler içeren bir sayfada etiketleri HTML’de tutun ve her simgeye kendi SVG kapsayıcısını verin. WHATWG, SVG’yi HTML’de gömülü içerik, satır içi içerik ve akış içeriği olarak tanımlar; bu da kapsayıcıların sıradan sayfa içeriği arasına yerleştirilmesini sağlar. HTML Standard: SVG.

Tek tanımla ve üç örnekle eksiksiz bir sayfa oluşturma

Mac’inizdeki bir düz metin düzenleyicide svg-reuse.html adlı bir dosya oluşturun. Aşağıdaki belgenin tamamını yapıştırın, kaydedin ve masaüstü tarayıcınızda açın. .html uzantısını koruyun ve dosyayı zengin metin belgesi olarak değil, düz metin olarak kaydedin.

Örnek, tek bir <path> kullanarak iki çapraz karo tanımlar. Üç başvuru aynı geometrinin farklı boyut ve renklerde görünmesini sağlar. Her başvuruda href="#demo-tiles" kullanılır; güncel biçim düz href iken xlink:href kullanımdan kaldırılmıştır. MDN: use öznitelikleri.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Reusable tile symbol</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      color: #263445;
    }
    .symbol-bank {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }
    .samples {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
    }
    .sample {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 1rem;
      border: 1px solid #cbd5df;
    }
    .icon {
      display: block;
      width: 24px;
      height: 24px;
      flex: none;
    }
    .icon-large { width: 48px; height: 48px; }
    .icon-medium { width: 32px; height: 32px; }
    .blue { color: #2457a7; }
    .purple { color: #7140a0; }
  </style>
</head>
<body>
  <svg class="symbol-bank" width="0" height="0" aria-hidden="true">
    <symbol id="demo-tiles" viewBox="0 0 24 24"
            preserveAspectRatio="xMidYMid meet">
      <path fill="currentColor"
            d="M4 4H10V10H4Z M14 14H20V20H14Z"></path>
    </symbol>
  </svg>

  <main>
    <h1>Tile samples</h1>
    <div class="samples">
      <div class="sample">
        <svg class="icon" width="24" height="24"
             viewBox="0 0 24 24" aria-hidden="true">
          <use href="#demo-tiles" width="24" height="24"></use>
        </svg>
        <span>Small tiles</span>
      </div>

      <div class="sample blue">
        <svg class="icon icon-large" width="48" height="48"
             viewBox="0 0 24 24" aria-hidden="true">
          <use href="#demo-tiles" width="24" height="24"></use>
        </svg>
        <span>Large tiles</span>
      </div>

      <div class="sample purple">
        <svg class="icon icon-medium" width="32" height="32"
             viewBox="0 0 24 24" aria-hidden="true">
          <use href="#demo-tiles" width="24" height="24"></use>
        </svg>
        <span>Medium tiles</span>
      </div>
    </div>
  </main>
</body>
</html>

Beklenen sonuç, aynı çapraz karoları içeren üç kenarlıklı örnektir. İlki gövde metninin rengini, ikincisi maviyi, üçüncüsü de moru kullanır. SVG kutularının boyutları sırasıyla 24, 48 ve 32 CSS piksel karedir. Örneklerin nasıl kaydırıldığını görmek için tarayıcı penceresini daraltın.

Bitişik etiketler içeriği sağladığı için bu örnekte şekiller dekoratiftir. Bu nedenle SVG kapsayıcılarında aria-hidden="true" kullanılır. Bu, görsel olarak gizlemeden onları erişilebilirlik ağacından çıkarır. Bu uygulamayı dekoratif grafiklerde kullanın; metinde bulunmayan bilgileri taşıyan görsellere uygulamayın. MDN: aria-hidden.

Sayfa düzenini ve SVG düzenini hangi ayarlar kontrol eder?

Birbirinden ayrı üç iş vardır: HTML bileşenlerini düzenlemek, her SVG kutusunun boyutunu ayarlamak ve çizimi bu kutuya sığdırmak. Bir işin ayarını değiştirmek diğer ikisini etkilemeyebilir.

İş Örnekteki ayar Neyi değiştirmeli?
Örnekleri sayfada düzenleme .samples, flexbox ve kaydırma kullanır Boşluğu veya kaydırmayı burada değiştirin
Her grafiği etiketiyle hizalama .sample, flexbox ve align-items: center kullanır Bileşenin hizalamasını burada değiştirin
Görüntülenen SVG kutusunun boyutunu ayarlama .icon ve boyut sınıfları CSS genişliğini ve yüksekliğini burada değiştirin
Çizim koordinatlarını tanımlama viewBox="0 0 24 24" Çizimin koordinat sınırları değiştiğinde bunu değiştirin
Başvurulan sembolün iç boyutunu ayarlama <use> genişlik ve yükseklik olarak 24 değerine sahiptir Bu örnekteki iç koordinat alanıyla aynı tutun
Çizimi orantılı biçimde sığdırma preserveAspectRatio="xMidYMid meet" Bunu yalnızca farklı bir sığdırma davranışı istendiğinde değiştirin

Flexbox, bir flex kapsayıcısının doğrudan alt öğelerini düzenler. Bu nedenle dış kapsayıcı örnekleri, her iç kapsayıcı da SVG’yi etiketin yanına yerleştirir. Flexbox aynı anda tek bir boyutta çalışır; kaydırılan satırların boşluğu birbirinden bağımsız dağıtılır. Satır ve sütunların koordineli olmasını gerektiren tasarımlar için sayfa düzeninde CSS Grid kullanılabilir. MDN: Flexbox’ın temel kavramları.

SVG içinde <use> farklı bir düzen modeline sahiptir. x ve y değerleri grafikleri SVG koordinat sisteminde kaydırır. HTML bileşenleri arasındaki boşluğu ayarlamazlar. Genişlik ve yükseklik, başvurulan bir sembolün görünüm alanını boyutlandırabilir; doğrudan başvurulan bir yol veya grubu genel olarak ölçeklendirmez. W3C: Yeniden kullanılan grafiklerin düzeni.

Büyük örneğin iç boyutları neden hâlâ 24?

Dış SVG’nin viewBox değeri 24’e 24 bir koordinat alanı tanımlar. CSS kutusu, iç koordinatlar değişmeden 48’e 48 piksel olabilir. <use> bu iç 24’e 24 alanı doldurur ve dış SVG bunu daha büyük görüntülenen kutuya eşler. MDN, viewBox değerini dört sayı olarak tanımlar: minimum x, minimum y, genişlik ve yükseklik. MDN: viewBox.

Bu görsele dayalı örnek hesaplamada, 48 piksellik bir kutu 24 koordinat birimini 48 / 24 = 2 ölçeğinde eşler. Karo geometrisi 4 ile 20 arasındaki koordinatları kaplar; dolayısıyla boyanmış toplam alan (20 - 4) × 2 = 32 piksel olur. Kalan boşluk, çizimin içindeki kasıtlı kenar boşluklarından kaynaklanır.

Bu, bir simgenin CSS genişliğini artırmanın boyanmış şeklin mutlaka tüm genişliği dolduracağı anlamına neden gelmediğini açıklar. Sayfa kenar boşluklarını telafi amacıyla ayarlamadan önce viewBox içindeki geometrinin sınırlarını kontrol edin.

Dikdörtgen SVG kutusunda ne olur?

xMidYMid meet ile çizim eşit oranda ölçeklenir, ortalanır ve kullanılabilir görünüm alanının içine sığdırılır. Bu nedenle geniş bir dikdörtgen içindeki kare çizimin kenarlarında boşluk kalır. none bozulmaya izin verir; slice oranları korur, ancak viewBox’ın bir kısmının görünüm alanının dışına taşmasına izin verir. Grafiğin tamamının görünür kalması gerekiyorsa meet kullanın. MDN: preserveAspectRatio.

Her örneğe kendi rengini nasıl verebilirsiniz?

Yol, fill="currentColor" kullanır. Bu anahtar sözcük, öğenin color değerini alır ve aynı çizimin çevresindeki metin rengini izlemesini sağlar. Örnekte .blue veya .purple kuralını değiştirmek hem etiketi hem de karolarını değiştirir. MDN: currentColor anahtar sözcüğü.

Bu, her örneğe miras yoluyla işler. SVG’nin yeniden kullanım modeli, oluşturulan içeriğe <use> ana makinesinden miras alınan stilleri verir. Kaynak yolda doğrudan tanımlanan sabit bir renk, üst öğeden miras alınan dolgu renginden öncelikli olur. Örneklere ayrı ayrı renk vermek gerekiyorsa ortak geometriyi sabit renklerden arındırın. W3C: Stil kapsamı ve kalıtım.

Oluşturulan bir yola görünür kapsayıcı üzerinden .blue path gibi bir seçiciyle erişmeye güvenmeyin. Oluşturulan içerik yeniden kullanım gölge ağacına aittir; bu nedenle üst öğe ilişkileri sıradan iç içe HTML’den farklıdır. Kapsayıcıda veya üst kapsayıcısında color ayarlayın ve kaynak geometrisindeki currentColor değerini koruyun. W3C: Stil kapsamı ve kalıtım.

Yeniden kullanılan bir sembol yanlış görünüyorsa neleri kontrol etmelisiniz?

Başvurudan başlayarak dışa doğru ilerleyin. Bu sıralama, eksik bir grafiği yanlış boyutlandırılmış veya konumlandırılmış bir grafikten ayırır; böylece her ayarlama belirli bir mekanizmayı düzeltir.

  1. Hedefi kontrol edin. href="#demo-tiles" değerinin tanımdaki id="demo-tiles" ile eşleştiğinden emin olun. Bu kimliği belge ağacında benzersiz tutun. W3C: id özniteliği.
  2. Görünür kapsayıcının boyutlarını kontrol edin. Sıfır boyutlu .symbol-bank sınıfını yalnızca tanım kapsayıcısında tutun. .icon örneğinde olduğu gibi her görünür örneğin sıfırdan büyük bir kutusu olmalıdır.
  3. Koordinat sınırlarını kontrol edin. Görselin belirtilen viewBox sınırları içinde olduğundan emin olun. Beklenmedik boşluk, kullanılmayan çizim koordinatlarından kaynaklanabilir. MDN: viewBox.
  4. Başvurulan öğe türünü kontrol edin. Sembolü doğrudan yol başvurusuyla değiştirdiyseniz <use> öğesinin genişliğini ve yüksekliğini değiştirmek, yolu aynı şekilde ölçeklendirmez. Bu örüntü için sembolü ve viewBox değerini geri yükleyin. MDN: use.
  5. Renk tanımlarını kontrol edin. Daha fazla örnek seçici eklemeden önce kaynakta sabit renkler olup olmadığına bakın.
  6. Sayfa kapsayıcısını kontrol edin. Grafik doğru işleniyor ancak etiketinden fazla uzakta duruyorsa bileşenin CSS boşluğunu veya hizalamasını ayarlayın. MDN: Flexbox’ın temel kavramları.

Örneği mevcut bir sayfaya eklerken sembol bankasını bir kez yerleştirin, CSS’yi birleştirin ve ek bileşenlere yalnızca görünür SVG kapsayıcısını kopyalayın. Küçük belge, öğelerin dengeli olması, kimliklerin benzersizliği ve üç başvurunun tek bir yol tanımına yönelmesi açısından yapısal denetimlerden geçirildi; bu denetimler tarayıcıda doğru görüntülendiğini göstermez. Sayfayı desteklemeyi planladığınız Mac tarayıcılarında açın ve boyutu, boşluğu ve rengi inceleyin.

Ortak çizimi değiştirmek için tek yol tanımını düzenleyin. Tek bir örneği değiştirmek için kapsayıcısının boyutunu veya miras alınan rengini düzenleyin. Bu sorumlulukları ayrı tutmak, yeniden kullanılabilir görseller ve her örneğin nerede görüneceği üzerinde öngörülebilir denetim sağlar.

Kaynaklar