Duyarlı SVGS için 10 Altın Kural

Feb 2, 2026
Nasıl Yapılır

SVG'nin birçok avantajı - sonsuz ölçeklenebilir vektör görüntüleri, küçük dosya boyutları ve DOM ile doğrudan entegrasyon dahil - bunun için doğal bir uyum sağlar Duyarlı Web Tasarımı . SVG şartnamesine on yıl yaşlı olmasına rağmen, birçok tarayıcıda ve araçta nispeten yeni bir destek, hala deneyimli web tasarımcıları ve geliştiricileri bile yakalayan bir dizi püf noktası, boşluk ve var.

Burada, bunların en önemlilerini 10 altın kural olarak özetledim.

01. Araçlarınızı doğru şekilde ayarlayın

Bir zanaatkarın çalışmalarına başlamadan önce aletlerini keskinleştirdiği gibi, SVG ile çalışan herkes, mümkün olan en verimli ve optimize edilmiş yöntemde vektör formatını sunmak için başvurularını ayarlamalıdır. Uygulanacak birkaç ayar var.

İlk olarak, başka türlü yapmak için zorlayıcı nedenler olmadığı sürece, vektör aracınızdaki ölçümleri 'piksellere' ayarlayın. SVG için önemli değilken (ki viewbox ve neredeyse her ölçüm sisteminde mutlu bir şekilde elemanlar), SVG çizimini, santimin baskısından ziyade ortak CSS üniteleri kullanarak geliştirmek anlamlıdır; ve ayrıca eklenmesini çok daha kolaylaştırıyor @media Sorgular ve diğer müdahaleler daha sonra.

Tuval alanını olması gerekenden daha büyük yapmayın. Bitmap görüntüleri gibi, SVG'deki herhangi bir 'boş alan' kullanılmayacak ve en iyi CSS marjları ile ikame edilir. Kroki gibi birçok vektör aletinin otomatik olarak tuval alanını seçilen öğelere 'kıracağını unutmayın.

Aynı zamanda, tuval alanını elemanların tam kenarlarına kırpmayın. Antialiasing hala SVG'ye uygulanacak ve çok yakın kesilmesi de antialiasing'i kırpabilir. Bunun yerine, tuvalin kenarı bir öğeye yaklaşırken en az 2px temizleyin.

Duyarlılık ve performans yakından ilişkilidir, bu nedenle ondalık hassasiyeti ikiden fazla puanla ayarlayın. SVG tamsayılarda düşünmüyor, bu yüzden bir vektör noktasının 1.45882721px değerine sahip olabilir. Bu aşırı hassasiyet tamamen gereksizdir ve yalnızca kod şişesi ve dosya boyutuna ekler, bu yüzden bu noktada kesmek daha iyidir.

Benzer şekilde, olabildiğince az sayıda puan kullanarak vektör şekillerini çizin. Birçok yeni tasarımcı daha iyi olduğunu varsayar, tersi aslında gerçek olduğunda: birkaç nokta, iyi yerleştirilen birkaç nokta, bir elemanın üzerinde daha fazla kontrol sağlarken, dosya boyutunu azaltır.

Bu kurala uymayan vektör dosyaları verdiyseniz, endişelenmeyin - çoğu vektör sanat Uygulamalar, bir öğedeki nokta sayısını şeklini değiştirmeden azaltmak için kullanabileceğiniz bir 'basitleştirilmiş' seçeneğine sahiptir. Alternatif olarak, ayrıntılı işler için Astute grafikleri gibi bir eklenti öneririm.

02. Yükseklik ve genişlik özelliklerini kaldırın

Çoğu uygulama, SVG ihracatında birçok özel, gereksiz kod ekler. Çoğu SVG dosyasının başlangıcındaki tek gerekli kod şudur: 

 & lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 500 500" & gt;
& lt;! - SVG kodu Burada - & gt;
& lt; / svg & gt;

Amaçlarımız için, en önemli yönü, çıkarılmasıdır. Genişlik ve yükseklik Çoğu uygulamanın otomatik olarak içerdiği özellikler. Bu, SVG'yi modern tarayıcılarda tamamen duyarlı hale getirir.

Çok fazla SVG'yi işliyorsanız veya acele ediyorsanız, bu adımı elle tamamlamanıza gerek yoktur. Bunun yerine, üçüncü altın kuralda belirtilen önerileri takip edebilirsiniz ...

03. SVG çıkışını optimize edin ve minnettar

A combination of intelligent hand-editing and post-production optimisation can reduce SVG file sizes markedly

Akıllı el düzenleme ve üretim sonrası optimizasyonun bir kombinasyonu, SVG dosya boyutlarını belirgin bir şekilde azaltabilir

SVG içeriğinizi oluşturmak için kullandığınız bir araç, yine de çıkışını bir araçla aracılığıyla işleme koyar. Svgomg , kodu belirgin şekilde kesecek. Tipik olarak, dosya boyutunda yüzde 20 ila 80 civarında tasarruf edebilirsiniz. Aynı kod yerel olarak entegre edilebilir Bir yulaf veya grunt görevi olarak .

04. IE için kodu değiştirin

Kural 2, modern tarayıcılarda doğru bir şekilde optimize edilmiş SVG'lerin tamamen duyarlı olduğunu belirtti. Microsoft Edge'i modern bir tarayıcı olarak sayarsak bu doğrudur. IE 9-11 için, ele almak için birkaç sorunumuz var. SVG'yi bir görüntü olarak kullanıyorsanız: 

 & lt; img src = "countdown.svg alt =" geri sayım "& gt;

IE9-11'i, CSS özniteliği seçicisini kullanarak görüntüyü doğru şekilde görüntüleyebiliriz: 

 IMG [SRC $ = ". SVG"] {Genişlik:% 100;}

SVG görüntüleri genel üretimde iyi çalışır, ancak sınırlı etkileşime sahiptir: Çoğu tarayıcı, bir sayfaya yerleştirilen bir SVG içindeki etkileşimi ve animasyonu görmezden gelir. . Ek olarak, SVG görüntüleri tarayıcı için ekstra bir HTTP isteğidir.

Bunlar ve diğer nedenlerden dolayı, SVG daha fazla satır içi kullanılmıştır. Bu durumda, SVG kodunun IE için biraz daha tedaviye ihtiyacı var: 

 & lt; vücut & gt;
...
& lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 525 365" preserveaspectratio = "xmidymin dilimi" & gt;

Buna ek olarak En boy oranını koru Öznitelik, yani görüntünün doğru ölçeklenmesini korumak için biraz daha rehberlik gerekir: SVG'nin genişliğini kullanın ( 365 Bu durumda), boyuna bölün ( 525 ) ve sonucu yüzde 100 ile çarpın. Bu olacak Dolgu-alt SVG'nin değeri, SVG'yi doğru en boy oranında görüntülemek için, IE'de yeterince açılır. 

 & lt; vücut & gt;
...
& lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 525 365"
PRESERVEASPECTRATIO = "Xmidymin Dilim"
Stil = "Genişlik:% 100; Dolgu-alt:% 69,52; Yükseklik: 1px; Taşma: Görünür" ve GT;

Bir şeyleri özlü ve net tutmak için, bu makalenin geri kalanındaki kod örnekleri bu değişiklikleri içermemektedir. Amelia Bellamy-Royds yazdı SVG ölçeklendirmesinde mükemmel makale .

05. Kahraman metni için SVG'yi düşünün

Using SVG for hero text means it will automatically scale in line with its container

Kahraman metni için SVG'yi kullanmak, kabı doğrultusunda otomatik olarak ölçeklendireceği anlamına gelir.

Şu anda metni kapsayıcısına boyutlandırmak için hiçbir CSS standardı yoktur. VW birimleri kullanarak metni ölçeklendirmek mümkündür, ancak bu, neredeyse her zaman metni belirli görünüm limitlerinde 'kelepçelendirmek için en az iki medya sorgusu müdahalesi gerektirecektir. Ancak, SVG metni otomatik olarak bir kaba yeniden boyutlandırılır: 

 & lt; başlık ve gt;
& lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 285 80" & gt;
& lt; metnin x = "0" y = "66" & gt; Kauai; / metin ve gt;
& lt; / svg & gt;
& lt; / header & gt;

CSS: 

 Header SVG Text {
Yazı Tipi Ağırlığı: 900; Yazı tipi boyutu: 90px; Doldur: Mavi;
}

SVG'nin satır içi tutulması erişilebilirliği ve SEO değerini korur ve metnin sayfaya yerleştirilmiş herhangi bir yazı tipi kullanılarak taranmasına izin verir. Görmek İşte daha fazla bilgi için.

06. İlerici simgeler için genişlik ve yükseklik bırakın

A non-scaling-stroke line has been applied to this speech bubble so it will not change in width when the viewport is resized

Bu konuşma balonuna ölçeklendirici olmayan bir çizgi uygulandı, böylece viewport yeniden boyutlandırıldığında genişlikte değişmeyecek

Kural 2'nin bir istisnası simgeler ve küçük logolardır; Genişlik ve yükseklik Bağımsız olarak geliştirilmelerini istiyorsanız, özellikler: 

 & lt; a href = "http://codepen.io" & gt;
    & lt; svg rol = "img" aria-label = "codepen" genişliği = "50" yükseklik = "50" & gt;
        & lt; unvanı ve gt; codepen & lt; / unvan & gt;
        & lt; xlink: href = "# codepen" / & gt kullanın;
    & lt; / svg & gt;
& lt; / a & gt;
...
& lt; svg style = "Ekran: Yok;" & gt;
    & lt; Symbol ID = "codepen" viewbox = "0 0 50 50" & gt;
        & lt; path d = "..." / & gt;
    & LT; / Symbol & GT;
& lt; / svg & gt;

Eylemde bu tekniğin bir örneğini görebilirsiniz. İşte .

SVG simgelerini yalnızca CSS ile boyutlandırırsak ve sitenin stil sayfası yüklenmiyorsa, simgeler değiştirilen bir öğenin varsayılan boyutunda görünecektir: 300px x 150px. Yükseklik ve genişliği özellik olarak tutarak, bunları varsayılan olarak en yakın makul dokunma boyutuna boyutlandırabiliriz ve sunuldukları gibi geliştirmek için CSS'lerimizi kullanın.

07. Tırnak çizgilerini ince tutmak için vektör efektlerini kullanın

Varsayılan olarak, SVG, kontur kalınlığı da dahil olmak üzere her şeyi viewport ile ölçeklendirir. Genellikle bu iyi çalışır, ancak bazı durumlarda - özellikle metnin dış tarafındaki etkiler olarak uygulanan diyagramlar ve darbeler, çizimin büyüklüğü ne olursa olsun, vuruşları aynı kalınlığı aynı kalınlığa kavuşturmak isteyebilirsiniz. Bu, az bilinenlerin alanıdır vektör etkisi sunum niteliği olarak veya CSS'de uygulanabilen özellik: 

 yol {
    Doldur: #FFF; İnme: # 111;
    İnme genişliği: 2;
    Vektör Etkisi: Ölçekleme-İnme;
}

Şuna baksana Bu tekniğin tam bir örneği .

08. Bitmaps'u hatırla

Birçok geliştirici, SVG'nin yalnızca vektörleri kullanabileceğini varsayalım, ancak JPEGS ve PNGS bir SVG çizimine de uygulanabilir. Ve şu ana kadar kurallarımı takip ettiğiniz sürece, bu görüntüler bir bitmap eklediğinizde yanıt verilecek. etiket: 

 & lt; image width = "1024" yükseklik = "768" xLink: href = "lake-louise.jpg" x = "1300" y = "150" rol = "image" title = "CrowsNest Pass" & GT; & lt; / image & gt;

09. Adaptif çözümleri göz önünde bulundurun

The classic Coca-Cola logo rendered at different adaptive sizes

Farklı adaptif boyutlarda render klasik coca-cola logosu

İşlerin 'Squish' yapılması, duyarlı tasarımın sadece bir parçasıdır. RWD'nin ne olduğu, daha büyük adaptif tasarım anlamında, tüm viewport boyutlarında uygun içerik sunuyor.

Bu çeşitli şekillerde elde edilebilir. Responlivelogos.co.uk SVG sprite kullanan bir dizi örnek sunar, ancak 'markalaşma modülleri' olarak adlandırdığım şeyi oluşturmak için medya sorgularını SVG'ye entegre etmeyi tercih ediyorum. Bu yaklaşım, bileşenlerin görünürlüğünü eklemem, kaldırmamı ve değiştirmemi sağlar. Uyarlamalı marka modülleri hakkında devamını oku Makalemde .

Bu aynı teknik diyagramlar, resimler, haritalar ve daha fazlası için kullanılabilir. En basit modüllerde, CSS'nin kendisi SVG'nin içine yazılabilir, önceki kuralda belirtildiği gibi her yerde kullanılabilir.

10. Medya sorgularını SVG'ye entegre edin

Birçok insan, CSS medya sorgularının SVG'nin kendisinde yazılabileceğini bilmiyor: 

 & lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "14 82 272 139" & gt;
& lt; defs & gt;
& lt; stil & gt;
svg g {geçiş: 1s; }
@Media Hepsi ve (maksimum genişlik: 90rem) {
#drink, #coke {opakal: 0; }
}
& lt; / stil & gt;
& lt; / defs & gt;
ve lt; g id = "Coca-cola" & gt;
& lt; path d = "m109.6 ... & gt;

Medya sorgusunun yalnızca 'içindeki öğeyi' görebileceğini not etmek önemlidir: yani, herhangi bir ölçüm, sayfa değil, öğenin kendisi ile ilgilidir. Bu yaklaşımın bir olası olası, SVG'nin tuval alanının, içindeki elemanlara göre her zaman aynı kalmasıdır.

Bu, nispeten büyük bir tuval alanının içinde çerçevelenmiş, küçük vitrin boyutlarında çok küçük unsurlara neden olabilir. Buna dahil olmak üzere birkaç çözüm var. Görünüm kutusunu yeniden boyutlandırma ve telafi etmek için elemanları ölçeklendirmek .

Sonuç

SVG'nin sonsuz ölçeklenebilirliği en büyük varlığıdır, ancak hâlâ tarayıcılar ve vektör grafik editörleri tarafından biraz rahatsız edici bir özelliktir. Bu kılavuzları üretim iş akışınıza entegre ederek ve bunları ekibinizde başkalarına ileterek, web için sorunsuz bir şekilde yanıt veren SVG oluşturabilir, her gün geliştirmede kullandığınız varlıkların bir bölümünü oluşturabilirsiniz.

Bu makale başlangıçta ortaya çıktı net dergisi Sayı 283; buradan satın al K!

İlgili Makaleler:

  • 12 Kod test araçları olmalı
  • Eskiz becerilerinizi keskinleştirin
  • GSAP ile SOFTACK SVG Animasyonları

Nasıl Yapılır - En Popüler Makaleler

Canlı Depolama Nasıl Yaratıcı Olarak Kullanımı

Nasıl Yapılır Feb 2, 2026

(Resim Kredi: Pixabay'den Jan Vašek) Neden bulut depolama kullanacağını bilmeniz gerekiyor? Peki bulut depolama a..

Bir at nasıl çizilir

Nasıl Yapılır Feb 2, 2026

Sayfa 1/2: Bir at nasıl çizilir: Adım adım Bir at nasıl çizilir: Ad..

Photoshop'ta bir arka plan nasıl kaldırılır

Nasıl Yapılır Feb 2, 2026

Sayfa 1/4: Sihirli değnek aracı Sihirli değnek aracı Hızlı seçim ve benzeri kenar araçları ..

Bir görüntünün odak noktasını nasıl vurgulamak için

Nasıl Yapılır Feb 2, 2026

Senin elemanlarını kullanma kalem underdrawing izleyicinin dikkatini bir parça içinde yakalamak için harika b..

Bir olay için nasıl gösterilir

Nasıl Yapılır Feb 2, 2026

Bir etkinlik için illüstrasyonlar oluşturmak, çizimlerinizi anlatımına besleyen, illüstrasyon tarzınızı uyarlayan ve m�..

Web Geliştirmede Markdown Nasıl Kullanılır

Nasıl Yapılır Feb 2, 2026

Web geliştiricileri ve içerik yaratıcıları olarak, genellikle içine sarılmış metin yazma metni harcıyoruz. Html..

Amazon Lumberyard'da başlayın: Kurulum

Nasıl Yapılır Feb 2, 2026

Amazon'un yeni oyun motoru, Kereste , oyunun ve varlık yaratma konusundaki ilgisini çeken herkes için ücretsiz..

FlexBox'un inanılmaz gücü

Nasıl Yapılır Feb 2, 2026

FlexBox veya Esnek Kutu Düzeni, web tasarımcıları ve geliştiricilere, elemanları bir kapta yerleştirmek, hizalamak ve dağ..

Kategoriler