SVG Desen Jeneratörü CSS arka planları için çeşitli şekillerle SVG tabanlı tekrar eden desenler oluşturun.

🎨

SVG Desen Jeneratörü

CSS arka planları için çeşitli şekillerle SVG tabanlı tekrar eden desenler oluşturun.

Bir desen şekli seçin

Daireler, kareler, üçgenler, altıgenler, haçlar veya çizgiler arasından seçim yapın.

Görünümü özelleştirin

Ön plan ve arka plan renklerini, boyutu, vuruş genişliğini ve opaklığı ayarlayın.

Kodu kopyalayın

Tekrarlayan deseni önizleyin ve CSS veya ham SVG kodunu kopyalayın.

Loading tool...

What Is SVG Desen Jeneratörü?

SVG Desen Jeneratörü, CSS arka planlarında gömülü veri URI'leri aracılığıyla satır içi SVG öğeleri kullanarak tekrarlayan desenler oluşturur. Bu yaklaşım, daireler, kareler, üçgenler, altıgenler, haçlar ve çizgiler de dahil olmak üzere daha fazla şekil çeşitliliği sunan saf CSS gradientlerine kıyasla daha fazla şekil seçeneği sunar. Her bir desen, arka plan boyunca sorunsuz bir şekilde tekrarlanan küçük bir SVG fayans olarak oluşturulur. Kontroller arasında ön plan ve arka plan renkleri, fayans boyutu, çizgi kalınlığı ve opaklık bulunur. Araç, hem CSS'yi (SVG, veri URI'si olarak kodlanmıştır) hem de ham SVG kodunu çıktı olarak verir. SVG desenleri çözünürlükten bağımsız, hafif ve gradient tabanlı desenlerden daha karmaşık olabilir. Tüm modern tarayıcılar tarafından desteklenir ve SVG işaretlemesini değiştirerek kolayca özelleştirilebilir.

Why Use SVG Desen Jeneratörü?

CSS gradientları alone ile mümkün olmayan altı şekil seçeneği
Hem CSS veri URI'si hem de ham SVG çıktı formatları
İnce ayar için ajuste edilebilir boyut, vuruş genişliği ve opaklık
Her ölçekte çözünürlük bağımsız SVG işleme

Common Use Cases

Marka Arka Planları

Marka tasarım dilini eşleştiren özel desenli arka planlar oluşturun.

Tasarım Sistemi Dokuları

Tasarım sistemi arka planları için tutarlı desen varlıkları oluşturun.

Yazıcı Malzemeleri

Yazdırma hazır tasarımlar için yüksek çözünürlüklü desenler oluşturun.

Sunum Slaytları

Sunum slayt arka planlarına ince desenler ekleyin.

Technical Guide

SVG desenleri, veri URI'lerini kullanarak CSS'ye gömülür: background-image: url("data:image/svg+xml,..."). SVG içeriği, CSS'de güvenle gömülebilmesi için URL olarak kodlanır. Her bir SVG fayans, belirli bir genişlik ve yüksekliğe sahip desen birimini tanımlar ve bu da arka plan boyutuna dönüşür. SVG tekrarlandığında (varsayılan background-repeat: repeat aracılığıyla), sorunsuz bir desen oluşturur. Daireler, dikdörtgenler ve çokgenler gibi SVG şekilleri, yalnızca CSS gradientlerine kıyasla daha fazla çeşitlilik sağlar. Dolgu ve çizgi öznitelikleri görünümü kontrol ederken, dolgu-opaklığı ve çizgi-opaklığı saydamlığı kontrol eder. Performans için, SVG desenlerini basitleştirin - küçük tekrarlayan fayanslardaki karmaşık yollar 렌더링i etkileyebilir. xmlns özniteliği, veri URI'lerindeki bağımsız SVG için gereklidir. SVG desenleri ayrıca daha iyi önbelleğe alma ve yeniden kullanım için dış SVG dosyalarına başvurabilir.

Tips & Best Practices

1
Daha iyi işleme performansı için SVG desenlerini basit tutun
2
Gözdağı vermeyen desenler oluşturmak için opaklığı kullanın
3
Ön plan rengini tema ile eşleştirmek için tutarlı bir tasarım oluşturun
4
Tasarım araçlarında kullanım için ham SVG'yi dışa aktarın

Related Tools

CSS Gradyan Jeneratörü

Birden çok renk durakları ve açı kontrolü ile güzel lineer, radyal ve konik CSS gradyanlar oluşturun.

🎨 CSS & Design

CSS Arka Plan Deseni

Çizgiler, satranç tahtası, noktalar ve daha fazlası dahil olmak üzere tekrarlanan CSS arka plan desenleri oluşturun.

🎨 CSS & Design

CSS Blob Oluşturucu

Organik blob şekillerini gradient dolguları ve rastgelelik ile SVG olarak oluştur.

🎨 CSS & Design

SVG'yi CSS Arka Planına Dönüştür

Veri URI kodlaması kullanarak SVG kodunu bir CSS arka-plan-görüntüsü olarak kodlayın.

🎨 CSS & Design

Frequently Asked Questions

Q SVG desenlerinin CSS desenlerine göre avantajı nedir?

SVG, altıgenler, üçgenler ve özel yollar gibi daha karmaşık şekilleri destekler, bu da CSS gradientları ile mümkün değildir.

Q SVG veri URI'leri performanslı mıdır?

Evet, içe aktarılan SVG veri URI'leri HTTP isteklerini engeller ve genellikle küçüktür. Basit desenler için verimli bir şekilde işlenirler.

Q Oluşturulduktan sonra SVG'yi düzenleyebilir miyim?

Evet, ham SVG çıktısını kopyalayın ve herhangi bir SVG düzenleyici veya metin düzenleyici ile değiştirin.

Q SVG desenleri tüm tarayıcılarda çalışır mı?

Evet, CSS arka planlarında kullanılan SVG veri URI'leri tüm modern tarayıcılar tarafından desteklenir.

Q Deseni daha büyük veya daha küçük yapabilir miyim?

Evet, boyut kaydırıcısını ayarlayarak tekrarlayan desenin yoğunluğunu ve fayans boyutlarını değiştirin.

About This Tool

SVG Desen Jeneratörü is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.