How does HTML to SVG work?

Your HTML is placed inside an SVG foreignObject, which browsers render as part of the vector so it scales without pixelation.

Do external images and fonts work?

Inline CSS and data-URI images work best. External resources may not load when the SVG is opened outside your site.

Is my HTML uploaded anywhere?

No. The SVG is generated entirely in your browser.

Can I set the size of the SVG?

Yes. Enter any width and height in pixels before generating. They define the SVG canvas and its viewBox, and because the file is a vector you can scale it later without losing sharpness.

Why does my SVG look blank in some graphics apps?

foreignObject is rendered by web browsers, but many graphics editors such as Inkscape or Illustrator do not fully support it. For best results use the SVG on web pages or in browser-based tools.

Can I turn the result into a PNG or JPG instead?

This tool keeps your markup as a vector and never rasterizes it. If you need a pixel image, render the same HTML with our HTML to Image tool, which outputs PNG, JPG or PDF.

HTML'den SVG'ye

HTML ve satır içi CSS'nizi foreignObject ile ölçeklenebilir bir SVG içine sarın. Canlı önizleyin, ardından .svg, PNG veya JPG olarak indirin. Her şey tarayıcınızda çalışır.

HTML kodu

Genişlik

Yükseklik

Biçim

Önizleme

SVG kaynağı

Ölçeklenebilir Bir Vektörün İçinde HTML

SVG'nin foreignObject öğesi, canlı HTML ve CSS'i bir vektör görselin içine gömmenizi sağlar. Sonuç sorunsuzca ölçeklenir ve SVG'nin kabul edildiği her yerde kullanılabilir — rozetler, kartlar ve zengin etiketler için idealdir.

Neden HTML'i Bir SVG İçine Sarmalı?

foreignObject ile oluşturulan bir SVG bir ekran görüntüsü değildir - kodunuz dosyanın içinde canlı kalır. Metin gerçek metin olarak kalır, satır içi CSS'iniz onu biçimlendirmeye devam eder ve hiçbir şey rasterleştirilmez; bu sayede görsel, dosyanın kendisi genellikle yalnızca birkaç kilobayt olsa da her yakınlaştırma seviyesinde kusursuz keskinliğini korur. Bu yaklaşım, README rozetleri, profil kartları, panel widget'ları ve stillendirilmiş bir HTML parçasının barındırabileceğiniz, gömebileceğiniz veya sürüm kontrolüne tabi tutabileceğiniz tek bir görsel dosya gibi davranmasını istediğiniz her yer için mükemmel bir seçimdir.

Vektör mü Ekran Görüntüsü mü - Hangisine İhtiyacınız Var?

Sonuç bir web tarayıcısında gösterilecekse bu aracı kullanın; tarayıcılar foreignObject ögesini yerel olarak işler ve keskin tutar. Vektör, işaretlemenizi canlı ve ölçeklenebilir tutar; böylece her boyutta keskin kalır ve dosya küçük kalır. Ekran görüntüsü ise aynı işaretlemeyi sabit bir piksel ızgarasında dondurur: SVG'nin desteklenmediği yerlerde kullanışlıdır, ancak sonradan yeniden biçimlendirilemez veya büyütülemez.

Sık Sorulan Sorular

HTML'i SVG'ye dönüştürme hakkında bilmeniz gereken her şey.

HTML'iniz, tarayıcıların vektörün bir parçası olarak işlediği bir SVG <foreignObject> içine yerleştirilir. Bütün yapı, pikselleşme olmadan ölçeklenir.

Satır içi CSS ve data-URI görselleri en iyi sonucu verir. SVG, sitenizin dışında açıldığında harici kaynaklar yüklenmeyebilir, bu yüzden mümkün olduğunca satır içi kullanın.

Hayır. SVG tamamen tarayıcınızda oluşturulur.

Evet. Oluşturmadan önce piksel cinsinden herhangi bir genişlik ve yükseklik girin. Bunlar SVG tuvalini ve viewBox'ını belirler; dosya bir vektör olduğundan daha sonra keskinlik kaybetmeden ölçeklendirebilirsiniz.

foreignObject web tarayıcıları tarafından işlenir, ancak Inkscape veya Illustrator gibi birçok grafik düzenleyici bunu tam olarak desteklemez. En iyi sonuç için SVG'yi web sayfalarında veya tarayıcı tabanlı araçlarda kullanın.

Bu araç kodunuzu vektör olarak korur ve asla rasterleştirmez. Bir piksel görseline ihtiyacınız varsa, aynı HTML'i PNG, JPG veya PDF çıktısı veren HTML - Görsel aracımızla işleyin.