SVG na Data URI

SVG to Data URI převádí SVG markup na optimalizovaný data URI string, který lze vložit přímo do HTML img src attributes, CSS background-image properties nebo JavaScript variables, aniž by bylo nutné samostatné HTTP request pro soubor SVG. Data URI kóduje zdroj inline v dokumentu pomocí URL encoding nebo Base64, čímž eliminuje network round-trip a zjednodušuje nasazení SVG icons, logos a decorative graphics ve webových aplikacích. URL-encoded data URIs jsou obecně preferovány před Base64 pro SVG, protože jsou kompaktnější a zůstávají částečně human-readable v browser developer tools. Nástroj volitelně minifies SVG markup před kódováním, aby se snížila konečná velikost data URI.

Procházet všechny nástroje Konvertor

Jak Pouzivat

Vložte svůj SVG code do input area a data URI se okamžitě vygeneruje ve output panel. Vyberte si mezi URL encoding a Base64 encoding pomocí format toggle: URL encoding produkuje menší output pro většinu SVG, zatímco Base64 je bezpečnější pro SVG content obsahující neobvyklé znaky, které by mohly narušit HTML attribute parsing. Zkopírujte celý data URI string a vložte jej do CSS background-image url() value, HTML img src attribute nebo JavaScript constant. Zobrazí se live preview vykresleného SVG, abyste mohli ověřit visual correctness před zkopírováním outputu.

Bezne Pripady Pouziti

• •Vkládání SVG icons jako CSS background-image data URIs do component stylesheets k eliminaci extra HTTP requests pro malé vector assets
• •Inlining firemních logos a marketingových illustrations jako data URIs v HTML email templates, kde je externí načítání obrázků blokováno email clients
• •Převod SVG favicons, app icons a cursors na data URIs pro inline embedding v single-file HTML documents a browser extensions
• •Inlining kritického above-the-fold SVG content jako data URIs k eliminaci render-blocking network requests pro initial page load
• •Přiřazování SVG mask images, patterns a filters jako data URIs v CSS pro self-contained, portable component stylesheets