Exemple de SVG de încercat
Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
<rect width="200" height="100" rx="16" fill="#0f766e"/>
<circle cx="50" cy="50" r="28" fill="#fbbf24"/>
</svg><svg xmlns="http://www.w3.org/2000/svg" width="64" height="64">
<circle cx="32" cy="32" r="28" fill="#dc2626"/>
</svg><svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
<path d="M3 12h18M12 3v18"/>
</svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 80">
<rect width="320" height="80" fill="#1e293b"/>
<text x="160" y="52" font-family="Arial, Helvetica, sans-serif" font-size="32" font-weight="700" fill="#ffffff" text-anchor="middle">dexblog.ro</text>
</svg>rsvg-convert -w 1024 logo.svg -o logo.png
rsvg-convert -w 512 -h 512 -b white iconita.svg -o iconita.png
magick logo.png -quality 90 logo.webpCum folosești convertorul SVG în PNG
- Trage un fișier
.svgîn zona de sus, alege-l cu butonul sau lipește codul în câmpul Codul SVG. - La Mărimea alege După lățime (scrii lățimea în pixeli, înălțimea se calculează din proporții) sau Scară (×1, ×2 sau ×4 față de mărimea din fișier).
- Alege Fundalul (transparent, alb sau o culoare), apoi Formatul: PNG, JPEG sau WebP, cu Calitatea pentru ultimele două.
- Verifică previzualizarea și apasă Descarcă. Totul rulează în browser; fișierul nu se trimite la niciun server.
Cum se află mărimea unui SVG
Un SVG e desenat cu vectori, deci poate fi exportat la orice mărime fără să se strice. Mărimea „naturală” vine din atributele width și height; dacă lipsesc, din viewBox, care dă sistemul de coordonate (x, y, lățime, înălțime) și deci proporțiile. Când există doar lățimea, înălțimea se calculează din proporțiile viewBox-ului. Fără niciuna dintre ele, browserele folosesc 300×150.
<!-- Doar viewBox: proporție 2:1, deci la 1024 px lățime iese 1024 × 512 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
<rect width="200" height="100" rx="16" fill="#0f766e"/>
</svg>Unitățile cm, mm, in și pt se transformă la 96 de pixeli pe inch. Pentru em convertorul socotește 16 pixeli, iar procentele nu au sens în afara unei pagini, așa că folosește viewBox.
Ce nu apare în imagine
SVG-ul este desenat ca imagine (printr-un element <img>), nu inserat în pagină. Așa scripturile din el nu rulează niciodată, dar nici resursele externe nu se încarcă: imaginile legate prin http, fonturile web și foile de stil importate lipsesc din rezultat. Fonturile instalate pe calculator se folosesc, deci textul poate arăta altfel pe alt dispozitiv. Ca să fii sigur, transformă textul în contururi în editor sau include resursele în fișier ca data:.
PNG păstrează transparența și nu pierde detalii; e alegerea bună pentru logo-uri și iconițe. JPEG nu are transparență (fundalul devine alb), iar WebP dă fișiere mai mici. Dacă browserul nu poate salva WebP, convertorul salvează PNG și te anunță.
Întrebări frecvente
De ce primesc eroarea „nu este XML valid”?
SVG-ul trebuie să fie XML corect: etichete închise, atribute între ghilimele și fără entități HTML ca (folosește  ). Codul copiat din pagini HTML nu are uneori xmlns; acesta e adăugat automat.
Ce mărime aleg pentru un favicon sau o iconiță de aplicație?
Exportă la mărimea exactă de care ai nevoie (32, 180 sau 512 pixeli) în loc să micșorezi apoi o imagine mare; vectorii se desenează curat la orice mărime. Pentru un set complet de iconițe poți folosi și generatorul de favicon de pe site.
Există o limită de mărime?
Rezultatul are cel mult 16384 de pixeli pe latură și aproximativ 16,7 milioane de pixeli în total, limita la care canvas-ul merge și pe iPhone. Dacă ceri mai mult, imaginea e micșorată proporțional și primești un mesaj.