Shopify için özel SVG simge: temiz marka işareti

Özel bir SVG simgeyi Shopify temasına iki pratik yolla ekleyebilirsiniz: dosyayı bir tema varlığı olarak yükleyip görüntü etiketiyle gösterin veya işaretlemesini bir Liquid snippet içine koyup simgenin bulunması gereken yerde bu snippet'i görüntüleyin. İlk yöntem, sabit renkli bir marka işareti için daha basittir. İkinci yöntem, yollar ve renk üzerinde doğrudan kontrol sağlar. Tema düzenleyicisinde hangi kontrollerin göründüğü temanıza bağlıdır; bu nedenle kodu değiştirmeden önce mevcut simge bloklarını inceleyin.

Tek kaynağınız PNG ise önce yollardan oluşan bir SVG oluşturun. Dosyanın adını değiştirmek pikselleri şekillere dönüştürmez. Elinizde temiz, özgün bir SVG varsa onu kullanmanız daha uygundur; ayrıntılı bir fotoğrafı ise genellikle görüntü olarak bırakmak daha iyidir. Aşağıdaki adımlar, belirli bir satıcı hesabı veya tema sürümü varsaymadan küçük bir marka piktogramını dosya hazırlığından tema önizlemesine kadar götürür.

Simgenin nereye yerleştirileceğini seçin

Shopify temalarında dosyalar için bir assets dizini ve yeniden kullanılabilir Liquid işaretlemesi için bir snippets dizini bulunur. Shopify, ikisini de tema mimarisi belgelerinde açıklar ve tema kodu rehberinde kodu düzenlemeden önce tema düzenleyicisi seçeneklerini kontrol etmenizi önerir. Özel SVG alanı olan bir temada aşağıdaki kod yöntemlerinin hiçbirine ihtiyaç olmayabilir. Bir temada böyle bir alan olması, her temada bulunduğu anlamına gelmez.

İki sunum yöntemi

Bu ayrım önemlidir, çünkü sayfadaki CSS, sıradan bir <img> üzerinden yüklenen SVG'nin içine erişemez. Satır içi yollar, değerini CSS color özelliğinden alan currentColor kullanabilir. MDN'nin SVG görüntü bağlamı rehberine ve currentColor açıklamasına bakın. Daha genel tarayıcı örnekleri için satır içi SVG ile görüntü etiketi karşılaştırmasını okuyun.

Temaya dokunmadan önce SVG'yi hazırlayın

Marka işaretinin işe yarayan en küçük sürümüyle başlayın. Bir simgede, müşterilerin gerçekten göreceği boyutta silueti ve kasıtlı açıklıkları koruyun. Çalışma yüzeyinde iyi görünen ince yazılar veya dokular, 20 ile 32 piksel arasında okunmaz hâle gelebilir. Markanın kaynak dosyasını ana dosya olarak saklayın; simgeyi ayrı olarak dışa aktarın.

1. Temiz kaynağı elde edin. Özgün vektör tasarım varsa SVG'yi ondan dışa aktarın. Tek kaynak düz renkli bir PNG ise PerfectVector bu adımda yardımcı olabilir: clipart-to-SVG iş akışıyla bir SVG adayı oluşturun, ardından indirdiğiniz dosyayı bir vektör düzenleyicide açın. Silueti ve ayrı şekilleri PNG ile karşılaştırın. Görüntünün kenarlarını takip ederek yapılan vektörleştirme bir başlangıç noktasıdır; geometrinin birebir aynı olacağına dair bir vaat değildir.
2. Yapıyı inceleyin. Görünür işaretin, tek bir gömülü raster <image> dikdörtgeni yerine yollardan veya temel vektör şekillerinden oluştuğunu doğrulayın. Yanlışlıkla eklenen arka plan kutularını, istenmeyen parçaları, yinelenen konturları ve küçük renk bölgelerini kaldırın. PNG simge hazırlama rehberi, bir küme genelinde tutarlı ızgaraları ve optik boyutu ele alır.
3. Tuvali ve renkleri ayarlayın. Dışa aktarıma uygun kenar boşluğuna sahip bir viewBox ekleyin. İşaretin iki renkli kalması gerekiyorsa sabit marka renklerini koruyun. Tek renkli bir simgenin tema rengini miras alması gerekiyorsa amaçlanan yolların currentColor kullanmasını sağlayın. SVG rengini değiştirme rehberi, sabit kodlanmış bir dolgunun daha sonraki renk değişikliğine neden direnebileceğini açıklar.
4. Dosyayı kod olarak inceleyin. Yalnızca simge için gerekli öğeleri ve öznitelikleri tutun. Temaya satır içi yerleştirmeden önce beklenmedik betikleri, haricî referansları, düzenleyiciden kalan gereksiz verileri ve güvenilmeyen işaretlemeyi kaldırın. Temizlenmiş SVG'yi simge boyutunda ve daha büyük bir inceleme boyutunda açın; bu iki kontrol farklı hataları yakalar.

Küçük, tek renkli bir yıldız için kaynak aşağıdaki kadar sade olabilir. Aşağıdaki yol özgün bir örnektir; Shopify'ın sağladığı bir simge veya PerfectVector dönüşüm sonucu değildir. Açıkça tanımlanmış bir koordinat sistemi vardır ve gömülü görüntü içermez:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2 14.7 9.3 22 12l-7.3 2.7L12 22l-2.7-7.3L2 12l7.3-2.7Z" fill="currentColor"/>
</svg>

İki renkli bir marka işareti, dolguları bilinçli olarak belirlenmiş ayrı yollar veya şekiller gerektirir. Her rengi currentColor ile değiştirmek bu ayrımı siler. İşaret daha büyük bir simge ailesinin parçasıysa geri kalanları dışa aktarmadan önce aynı boyut ve renk kurallarını birkaç temsili simgeye uygulayın.

Yöntem A: bir tema varlığı gösterin

Shopify'ın asset_url filtresi, temanın assets dizinindeki bir dosyanın CDN URL'sini döndürür. İncelediğiniz SVG'yi oraya ekleyin, ardından uygun Liquid şablonunda, bölümünde veya snippet'inde dosyanın tam adına başvurun. Aşağıdaki basit örnek, brand-mark.svg dosyasının görünür metnin yanında bulunan sabit renkli, dekoratif bir işaret olduğunu varsayar:

<img
  src="{{ 'brand-mark.svg' | asset_url }}"
  alt=""
  width="24"
  height="24"
>

Görüntü, yanındaki metnin iletmediği bir bilgi aktarıyorsa açıklayıcı alt metni kullanın. Tamamen dekoratif bir görüntü için alt="" uygundur. Shopify'ın tema erişilebilirliği rehberi, her görüntüde bir alt özniteliği ve dekoratif simgelerde boş değer ister. Açıkça belirtilen genişlik ve yükseklik de varlık yüklenirken yer ayırır; Shopify'ın varlık sunumu rehberi bunu açıklar.

Bu yöntem, sayfanın bakış açısından SVG'yi tek bir görüntü olarak tutar. Tema rengi değişirse bir üst öğedeki CSS kuralının dosyayı yeniden renklendireceğini varsaymak yerine SVG'nin dolgularını güncelleyin veya satır içi yöntemi seçin. Bir mağazanın dosya URL'sini başka bir temaya yapıştırmayın; tema varlığını asset_url filtresinin çözümlemesine izin verin.

Yöntem B: satır içi simge snippet'i görüntüleyin

Tekrarlanan tek renkli bir simge için incelenmiş SVG işaretlemesini snippets/brand-mark-icon.liquid gibi bir snippet'e koyun. Shopify'ın snippet belgeleri, yeniden kullanılabilir işaretleme eklemek için {% render %} kullanır. En basit hâliyle bir snippet, rengini çevresindeki metin stilinden alabilir:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
  width="24" height="24" aria-hidden="true" focusable="false">
  <path d="M12 2 14.7 9.3 22 12l-7.3 2.7L12 22l-2.7-7.3L2 12l7.3-2.7Z"
    fill="currentColor"/>
</svg>

Ardından ilgili tema dosyasında görüntüleyin:

<span class="brand-mark-icon">{% render 'brand-mark-icon' %}</span>

Burada aria-hidden="true", yalnızca yakınındaki görünür metni süsleyen bir simge içindir. Düğmeyi veya bağlantıyı yalnızca simge etiketliyorsa dekoratif bir SVG'ye güvenmek yerine kontrole erişilebilir bir ad verin. Klavye ve ekran okuyucuyla test edin. Tek kullanımlık satır içi değerleri farklı yerlere dağıtmak yerine CSS rengini ve boyutlarını temanın normal stil sistemi içinde tutun.

Bir snippet yeniden kullanılabilir, ancak yine de tema kodudur. Shopify, kod değişikliklerinden önce temayı çoğaltmanızı önerir. Değişikliği kopyada yapın, ilgili sayfayı veya bölümü önizleyin ve tema güncellemesinden sonra karşılaştırabilmek için özgün snippet'i saklayın. Temaya özgü simge kütüphanelerinin kendi argümanları ve yapıları olabilir; yerleşik bir simgeyi değiştirmeden önce bu dosyaları inceleyin. Güncel Shopify Community simge kütüphanesi tartışması, kütüphanenin tamamını görüntülemenin neden içinden tek bir simge seçmekle mutlaka aynı şey olmadığını gösterir.

Son boyutta entegrasyonu kontrol edin

Bir dosya teknik olarak geçerli olsa da mağazada yanlış görünebilir. Tema açık ve koyu arka planlar kullanıyorsa sayfayı her ikisinde de inceleyin. İşareti gerçek CSS boyutunda, dar bir görüntü alanında ve komşu simgelerin yanında kontrol edin. Deliğin açık kaldığını, renklerin yeterli kontrasta sahip olduğunu ve simgenin viewBox veya kapsayıcısı tarafından kırpılmadığını doğrulayın.

Varlık büyütüldüğünde bulanık bir dikdörtgen gibi görünüyorsa gömülü raster içerip içermediğini inceleyin. Satır içi simge tema rengini izlemiyorsa sabit kodlanmış dolguları, satır içi stilleri veya daha özgül bir seçiciyi arayın. Hiçbir şey görünmüyorsa önce varlık dosyasının veya snippet'in adını, ardından temanın kendi bölüm işaretlemesini kontrol edin. Aynı anda birkaç şeyi değiştirmeyin. CSS maske simgeleri rehberi, yollarını satır içi yerleştirmeden bir silueti yeniden renklendirmeniz gerektiğinde kullanabileceğiniz başka bir yöntemi ele alır.

Yalnızca raster biçimindeki kendi düz renkli piktogramınız için PerfectVector ile bir SVG adayı oluşturun, ardından tema yöntemini seçmeden önce yollarını, açıklıklarını ve renklerini amaçlanan simge boyutunda inceleyin. Zaten iyi bir SVG'niz varsa vektörleştirmeyi atlayın ve bu zamanı mağaza önizlemesine ayırın.

Sık sorulan sorular

Her Shopify temasının Customize ekranından SVG simge yükleyebilir miyim? Hayır. Bazı temalar simge veya özel SVG alanı sunar; diğerlerinde varlık eklemek veya kod düzenlemek gerekir. Bir alanın var olduğunu varsaymadan önce ilgili temanın bölümlerini ve belgelerini kontrol edin.

Yüklediğim SVG neden tema rengini izlemiyor? Görüntü etiketi üzerinden kullanılan SVG bir görüntü kaynağıdır; dolayısıyla sayfa CSS'si içindeki yolları biçimlendirmez. Sabit renkli bir varlık için SVG'nin dolgularını düzenleyin veya temadan gelen rengin gerektiği yerde currentColor içeren, incelenmiş satır içi işaretleme kullanın.

PNG marka simgesini eklemeden önce SVG'ye dönüştürmeli miyim? Ölçeklenebilir, düzenlenebilir yollar gerekiyorsa düz renkli bir piktogramı dönüştürün. Vektörleştirme sonucunu amaçlanan simge boyutunda inceleyin ve istenmeyen şekilleri kaldırın. Vektörleştirme, fotoğrafı veya dokulu görüntüyü tanımlayan ayrıntıları yok edecekse bunları raster olarak tutun.

Kaynaklar

1. Shopify Developers — Theme architecture — Tema varlıklarını, snippet'leri ve işaretlemenin nereye yerleştirileceğini açıklar.
2. Shopify Developers — asset_url — Liquid örneğinde kullanılan tema varlığı URL davranışını açıklar.
3. Shopify Developers — Snippets — Yeniden kullanılabilir Liquid işaretlemesini ve render etiketini açıklar.
4. Shopify Help Center — Editing theme code — Önce düzenleyiciyi kullanma yaklaşımını, tema çoğaltmayı ve kod değişikliği uyarılarını açıklar.
5. Shopify Developers — Accessibility best practices — Alternatif metni ve dekoratif simgelerin nasıl ele alınacağını açıklar.
6. Shopify Developers — Serve assets from Shopify CDN — Varlık filtrelerini ve açıkça belirtilen görüntü boyutlarını açıklar.
7. MDN — SVG as an image — Tarayıcı görüntü bağlamındaki kısıtlamaları açıklar.
8. MDN — SVG color attribute — currentColor değerinin SVG dolgularına ve konturlarına nasıl aktarıldığını açıklar.