Duyarlı SVG Logoları: Küçük Boyutta Kompozisyonu Değiştirin

Duyarlı SVG logo, her parçayı birlikte küçültmek yerine ayrıntılı kompozisyon ile kompakt işaret arasında geçiş yapabilir. Önce iki kompozisyonu oluşturun, ardından aralarında seçim için medya koşullu <picture> kaynağı kullanın. Desteklemeyi amaçladığınız genişliklerde görselin currentSrc değerini kontrol edin.

Bu örnek özgün, kurgusal Cove kompozisyonu kullanır: çizilmiş harflerle delikli eşkenar dörtgen ve yalnızca işaret sürümü. Geçişi belge görüntü alanının genişliğine bağlıdır. Geniş sayfa içindeki dar kapsayıcı aynı geçişi tetiklemez.

Ölçeklendirme ve kompozisyon seçimi farklı işleri çözer

Normal ölçeklendirme tüm kompozisyonu korur: sembol, yazı ve aralarındaki boşluk birlikte küçülür. Sanatsal yönlendirme başka oluşturulmuş kompozisyonu seçer. Yazıyı kaldırmak veya işareti yeniden düzenlemek tasarım kararıdır; SVG dosyası ölçeklenebilir diye bu kararı otomatik vermez.

HTML picture başvurusu, medya koşullarıyla seçilen alternatif kaynakları ve img yedeğini açıklar. Burada 599 piksel veya daha dar genişlikte kompakt SVG, aksi durumda ayrıntılı SVG sunuyoruz. İçeriği değişirken görsel çerçevesi aynı boyutta kalır.

Kompozisyonu ölçekleyin veya başka birini seçin

Düzenlenebilir iki dosya oluşturun

Bu özgün ayrıntılı kompozisyonu detailed.svg olarak kaydedin. Harfler çizilmiş yollar olduğundan küçük örneğin yazı tipi dosyasına ihtiyacı yoktur:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="96" viewBox="0 0 300 96">
  <g fill="#176b5b" fill-rule="evenodd">
    <path d="M48 8 L88 48 L48 88 L8 48 Z M48 30 L66 48 L48 66 L30 48 Z"/>
    <path d="M130 24 H160 V32 H138 V64 H160 V72 H130 Z"/>
    <path d="M168 24 H198 V72 H168 Z M176 32 V64 H190 V32 Z"/>
    <path d="M206 24 H214 L225 60 L236 24 H244 L229 72 H221 Z"/>
    <path d="M252 24 H282 V32 H260 V43 H278 V51 H260 V64 H282 V72 H252 Z"/>
  </g>
</svg>

Kompakt sürümü compact.svg olarak kaydedin:

<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
  <path d="M48 8 L88 48 L48 88 L8 48 Z M48 30 L66 48 L48 66 L30 48 Z" fill="#176b5b" fill-rule="evenodd"/>
</svg>

Eşkenar dörtgen yolu iki dosyada özdeştir. Ayrıntılı dosya beş, kompakt dosya tek yol içerir. İkisinde de image öğesi veya canlı metin yoktur. İki viewBox genişliği bir dosya tekdüze ölçeklendiğinden değil, kompozisyonları farklı olduğundan farklıdır.

İki kaynak sürümünü de koruyun. Kendi markanız için kompakt kompozisyonda hangi özelliklerin tanınabilir kalması gerektiğine karar verin, ardından açıklığını, kenar boşluklarını ve oranlarını inceleyin. Logo dosya biçimi kılavuzumuz, daha geniş kaynak ve teslim paketini ele alır; bu örnek onaylanmış iki sürüm arasında tarayıcı seçimi ekler.

Eksiksiz picture başlangıcını çalıştırın

Bunu iki SVG'nin yanına starter.html olarak kaydedip klasörü yerel sunun. Python kuruluysa python3 -m http.server 8766 bir seçenektir; ardından tarayıcıda http://localhost:8766/starter.html açın.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cove logo source selection</title>
<style>
  body { margin: 24px; font: 16px system-ui; background: #f6f2e8; }
  .slot { width: 200px; border: 1px dashed #b9c8be; margin-bottom: 24px; }
  .narrow { width: 120px; }
  .slot img { display: block; width: 100%; height: 80px; object-fit: contain; }
  pre { white-space: pre-wrap; font-size: 12px; }
</style>
<h1>Cove: choose the composition</h1>
<p>Art-directed image, constant 200-pixel container:</p>
<div class="slot">
  <picture>
    <source media="(max-width: 599px)" srcset="compact.svg" type="image/svg+xml">
    <img id="directed" src="detailed.svg" width="300" height="96" alt="Cove">
  </picture>
</div>
<p>Ordinary scaling, same container:</p>
<div class="slot">
  <img id="scaled" src="detailed.svg" width="300" height="96" alt="Cove">
</div>
<p>Art direction in a narrower 120-pixel container:</p>
<div class="slot narrow">
  <picture>
    <source media="(max-width: 599px)" srcset="compact.svg" type="image/svg+xml">
    <img id="narrow" src="detailed.svg" width="300" height="96" alt="Cove">
  </picture>
</div>
<pre id="report"></pre>
<script>
  const images = [...document.images];
  function report() {
    document.getElementById('report').textContent = JSON.stringify({
      viewportWidth: innerWidth,
      mediaMatches: matchMedia('(max-width: 599px)').matches,
      images: images.map(image => ({ id: image.id, currentSrc: image.currentSrc,
        complete: image.complete, naturalWidth: image.naturalWidth,
        naturalHeight: image.naturalHeight,
        containerWidth: image.parentElement.closest('.slot').clientWidth,
        elementWidth: image.getBoundingClientRect().width,
        elementHeight: image.getBoundingClientRect().height, alt: image.alt })),
    }, null, 2);
  }
  images.forEach(image => image.addEventListener('load', report));
  addEventListener('resize', report);
  report();
</script>
</html>

Medya koşulu (max-width: 599px) değeridir. CSS'nin width medya özelliği, görüntü alanı genişliğini değerlendirir. 600 pikselde koşul false olur; başlangıç ayrıntılı img kaynağını seçer. Sayı, marka tasarım kuralı değil bu düzenin örnek kırılma noktasıdır.

CSS 80 piksellik görsel yüksekliği ayırır ve seçilen görseli öğe kutusuna sığdırmak için object-fit: contain kullanır. Böylece iki kompozisyonu aynı en boy oranına germeden görünür tutar. Sığdırma stilini seçilen kaynağı sunan img öğesine uygulayın.

alt="Cove", iki durumda da kurgusal markayı tanımlar. HTML img başvurusunun açıkladığı gibi kendi görselinize uygun metin alternatifi verin. Kompakt işaret, görünür yazı kaybolduğunda erişilebilir adını kaybetmemelidir.

Tarayıcı üç genişlikte ne seçti?

Başlangıcı aynen Chrome'da 480, 600 ve 960 piksel belge görüntü alanı genişliğinde açtık. Her genişlikte üç görsel de yüklemeyi tamamladı. Ana kapsayıcı 200 piksel, dar kontrol 120 piksel genişlikte kaldı.

Seçilen URL'yi yüklenen görsel boyutlarıyla birlikte HTMLImageElement.currentSrc üzerinden kontrol ettik. Yalnızca seçilen URL başarılı yükleme testi değildir; complete ve içsel boyutları da inceleyin. Kompakt kaynağımız 96×96, ayrıntılı kaynak 300×96 bildirdi.

Ana görsel öğesi üç genişlikte de 200×80 kaldı. Dar kontrol 120×80 kaldı. 480 pikselde kompakt işaret her çerçevede ortalandı, normal ölçeklendirme kontrolü ise tüm kompozisyonu göstermeye devam etti. 600 ve 960 pikselde kapsayıcıyı 120 piksele daraltmak ayrıntılı kompozisyonu küçülttü; kompakt dosyayı seçmedi.

Bu ayrım yan çubukta veya yeniden kullanılabilir bileşende önemlidir. Bu HTML medya koşulu, kapsayıcısının ölçülen genişliğine değil görüntü alanına yanıt verir. Logo seçiminiz bileşenin kullanılabilir genişliğine bağlı olmalıysa bu kırılma noktasının bileşeni gözlediğini varsaymak yerine ayrı mekanizmayı planlayıp sınayın.

Bu sonuçlar özgün dosyaları, tek tarayıcıyı ve açık üç görüntü alanı genişliğini kapsar. Her tarayıcıyı, gömme yöntemini veya dışa aktarma hedefini kanıtlamaz. Başlangıç, harici SVG içindeki medya kurallarını da sınamaz.

Çerçeveyi ve çizimi ayrı kontrol edin

Öğe kutusu boyalı logo sınırlarıyla aynı değildir. Ayrıntılı kaynağın tarayıcı geometri sınırları 300×96 viewBox içinde x8, y8, genişlik274, yükseklik80 idi. Kompakt kaynağın sınırları 96×96 viewBox içinde x8, y8, genişlik80, yükseklik80 idi. Bu kenar boşlukları kaynağın sığdırma hesabının parçası olarak kalır.

Seçilen logo çok küçük görünüyorsa öğe boyutlarını büyütmeden önce kaynak boşluğunu inceleyin. Gerilmiş görünüyorsa görsel kutusunu ve sığdırma kuralını inceleyin. preserveAspectRatio kılavuzu, ilgili SVG görüntü alanı hesabını açıklar; eşlemeyi değiştirmek tek başına ikinci kompozisyon oluşturmaz.

Bu başlangıç img üzerinden harici SVG görseller kullanır. Başka gömme yaklaşımı seçmeniz gerektiğinde satır içi SVG ve img kılavuzunu kullanın. İndirilen veya yazdırılan SVG dosyası bu HTML kaynak seçme sarmalayıcısını içermez; alıcının ihtiyaç duyduğu gerçek kompozisyonu teslim edin ve düzenlenebilir sürümleri koruyun.

Raster logodan sürümler hazırlayın

Marka çiziminiz yalnızca PNG veya JPG ise ve düzenlenebilir geometri gerekiyorsa PerfectVector ile SVG logo hazırlayın, silueti ve iç açıklıkları inceleyin, temiz ana dosyayı koruyun. Ardından ayrıntılı ve kompakt kompozisyonları oluşturup sayfanızda seçimlerini sınayın. Vektörleştirme çizimi hazırlar; hangi yazının kaldırılacağına karar vermez veya kırılma noktanızı seçmez. Mevcut temiz SVG çizimi doğrudan kompozisyon işine geçebilir. Vektörleştirme kılavuzu, dönüşümün ne zaman yardımcı olduğunu açıklar.

Sık sorulan sorular

SVG küçük ekranda logoyu otomatik sadeleştirir mi? Bu örnek oluşturulmuş iki SVG dosyası arasından seçer. Tek dosyayı ölçeklendirmek özgün kompozisyonunu korur; sadeleştirme ayrı tasarım kararı gerektirir.

Dar kapsayıcı neden hâlâ ayrıntılı logo gösteriyor? picture kaynağının genişlik koşulu belge görüntü alanını kontrol eder. Sınanan 600 ve 960 piksellik görüntü alanlarında 120 piksellik kapsayıcı bile ayrıntılı kaynağı korudu.

Hangi dosyanın kullanıldığını nasıl doğrularım? Görselin currentSrc değerini, yükleme durumunu ve içsel boyutlarını inceleyin. Başlangıç bunları öğe ve kapsayıcı boyutlarıyla birlikte yazdırır.

SVG indirirken duyarlı geçiş de dâhil olur mu? Kaynak seçme kuralı HTML sarmalayıcısındadır. Alıcının gerçek kullanımı için gereken ayrıntılı veya kompakt SVG'yi saklayıp teslim edin.

Kaynaklar

1. HTML picture öğesi — alternatif kaynaklar, medya koşulları ve yedek davranışı.
2. CSS width medya özelliği — başlangıcın belge görüntü alanı koşulu.
3. Görsel currentSrc özelliği — seçilen kaynak URL'sini inceleme.
4. CSS object-fit — seçilen her kompozisyonu görsel çerçevesine sığdırma.
5. HTML img öğesi — görsel sunumu ve metin alternatifleri.

Kendi PNG veya JPG logonuz için düzenlenebilir SVG ana dosyası hazırlayın, dış hattını ve açıklıklarını kontrol edin, onaylı kompozisyonların yanında koruyun. Ardından sayfanızın kullanacağı görüntü alanı genişliklerinde seçilen kaynağı ve görünür kompozisyonu doğrulayın.