{"id":68620,"date":"2024-09-23T07:00:00","date_gmt":"2024-09-23T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=68620"},"modified":"2025-10-07T13:45:58","modified_gmt":"2025-10-07T20:45:58","slug":"tcb-con-svg-come-creare-e-utilizzare-file-svg-sul-tuo-sito-web-it","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/it\/tcb-con-svg-come-creare-e-utilizzare-file-svg-sul-tuo-sito-web-it\/","title":{"rendered":"TCB Con SVG: Come Creare e Utilizzare File SVG Sul Tuo Sito Web"},"content":{"rendered":"\n<p>Alcuni dicono che Elvis Presley fosse il pi\u00f9 grande artista di tutti i tempi.<\/p>\n\n\n\n<p>Diciamo che il formato di file SVG \u00e8 un rivale molto vicino.<\/p>\n\n\n\n<p>Vedi, Elvis manteneva sempre le promesse. Il suo mantra personale era &#8220;Taking care of business,&#8221; abbreviato in TCB sui suoi gioielli.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1181\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb.webp\" alt=\"Foto di Elvis al matrimonio di George Klein con indosso la sua collana TCB\" class=\"wp-image-49627 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-300x221.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-1024x756.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-768x567.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-1536x1134.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-600x443.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-1200x886.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-730x539.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-1460x1078.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-784x579.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-1568x1157.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-877x647.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1181;\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/www.instagram.com\/p\/BwM33HqHAlW\/\" target=\"_blank\" rel=\"noreferrer noopener\">Fonte<\/a><\/figcaption><\/figure>\n\n\n\n<p>E potresti dire lo stesso per i file SVG.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>SVG<\/h3>\n    <p>Un file SVG, o file Scalable Vector Graphic, \u00e8 un formato di file che rende immagini bidimensionali. Descrive come deve apparire l&#8217;immagine utilizzando un formato di testo XML.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/svg\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leggi di pi\u00f9                    <\/a>\n\n<\/div>\n\n\n\n<p>Non importa a quale progetto stai lavorando, questo formato di immagine far\u00e0 al caso tuo. Questi file sono leggeri, scalabili e ottimi per l&#8217;<a href=\"https:\/\/www.dreamhost.com\/blog\/make-your-website-accessible\/\" target=\"_blank\" rel=\"noreferrer noopener\">accessibilit\u00e0<\/a>. Puoi anche modificarli usando codice.<\/p>\n\n\n\n<p>Hai ancora bisogno di convincerti? In questa guida molto leggibile, diamo un&#8217;occhiata pi\u00f9 da vicino al formato SVG e spieghiamo come utilizzare questi file nei tuoi progetti.<\/p>\n\n\n\n<p>Pronto per iniziare? Meno chiacchiere e pi\u00f9 azione!<\/p>\n\n\n\n<h2 id=\"h-l-abc-degli-svg-capire-i-file-di-immagine\" class=\"wp-block-heading\">L&#8217;ABC degli SVG: Capire i File di Immagine<\/h2>\n\n\n\n<p>Immagina di creare un sito web. Probabilmente vorrai inserire alcune immagini.<\/p>\n\n\n\n<p>Quale tipo di file dovresti usare?<\/p>\n\n\n\n<p>Il tuo istinto potrebbe essere JPEG o PNG. Forse ti sbizzarrirai e inserirai qualche GIF.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/media4.giphy.com\/media\/v1.Y2lkPTc5MGI3NjExemYyMXZuMThmZXBseDJ4Ym5raTR0NXVtNDI0dnpsaDZ5Y3JhOWcyNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw\/l0IyqqiSuoOFBdZ7i\/giphy.webp\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/giphy.com\/gifs\/chuber-bears-elvis-l0IyqqiSuoOFBdZ7i\" target=\"_blank\" rel=\"noreferrer noopener\">Fonte<\/a><\/figcaption><\/figure>\n\n\n\n<p>Ma&#8230; qual \u00e8 la differenza? Ecco un confronto tra i soliti sospetti:<\/p>\n\n\n\n<p><strong>JPEG (Joint Photographic Experts Group)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pro: Dimensioni dei file ridotte, ottimo per immagini complesse.<\/li>\n\n\n\n<li>Contro: Perde qualit\u00e0 quando compresso, nessuna trasparenza.<\/li>\n<\/ul>\n\n\n\n<p><strong>PNG (Portable Network Graphics)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pro: Compressione senza perdita, supporta la trasparenza.<\/li>\n\n\n\n<li>Contro: File pi\u00f9 grandi rispetto ai JPEG.<\/li>\n<\/ul>\n\n\n\n<p><strong>GIF (Formato di Scambio Grafico)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vantaggi: Supporta animazioni semplici, dimensioni del file ridotte.<\/li>\n\n\n\n<li>Svantaggi: Colori limitati, pu\u00f2 apparire pixelato.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" data-src=\"https:\/\/i.giphy.com\/media\/v1.Y2lkPTc5MGI3NjExZnQyaXJnOTNjNGtrOThvcHoyNmdtemFqOXZyeGtxbjZ6OTVmaGo5YSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw\/IxPS9xRu7TwYlrgBv4\/giphy.gif\" alt=\"\" style=\"width:500px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<p>Questi formati possono sembrare diversi. Tuttavia, sono tutti esempi di immagini raster.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.dreamhost.com\/blog\/optimize-images-for-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">Le immagini raster (o bitmap)<\/a> sono dipinte con pixel posizionati con precisione. Hanno dimensioni, colori e forme fisse.<\/p>\n\n\n\n<p>Questi tipi di file sono ottimi per condividere immagini con molti dettagli, come <a href=\"https:\/\/www.dreamhost.com\/blog\/photography-portfolio-website-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">foto di alta qualit\u00e0<\/a>.<\/p>\n\n\n\n<p>Lo svantaggio \u00e8 che non puoi mai cambiare o estendere l&#8217;immagine originale. Puoi solo dipingerci sopra o aggiungere altri pixel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Perch\u00e9 gli SVG sono cos\u00ec utili<\/h3>\n\n\n\n<p>Il formato SVG (Scalable Vector Graphics) \u00e8 diverso.<\/p>\n\n\n\n<p>I file vettoriali contengono un insieme di istruzioni testuali su come costruire un&#8217;immagine. Questi file sono scritti in XML (Extensible Markup Language).<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>XML<\/h3>\n    <p>XML \u00e8 l&#8217;acronimo di Extensible Markup Language. Questo linguaggio utilizza i tag per aggiungere informazioni ai file, leggibili sia da macchine che da esseri umani.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/xml\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Leggi di pi\u00f9                    <\/a>\n\n<\/div>\n\n\n\n<p>Quando tenti di caricare un file SVG, il tuo dispositivo esamina le istruzioni e costruisce l&#8217;immagine su richiesta.<\/p>\n\n\n\n<p>Ci sono diversi vantaggi in questo sistema:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gli SVG possono essere <strong>ridimensionati a qualsiasi dimensione<\/strong> e continuano a sembrare perfetti.<\/li>\n\n\n\n<li>Possono anche essere <strong>modificati come file di codice<\/strong>.<\/li>\n\n\n\n<li>Puoi persino <strong>stilizzarli usando il CSS<\/strong>.<\/li>\n\n\n\n<li>Essendo gli SVG composti da testo, <strong>hanno dimensioni molto ridotte<\/strong>.<\/li>\n\n\n\n<li>Questo significa che occupano <strong>meno spazio di archiviazione<\/strong> sul tuo server web.<\/li>\n\n\n\n<li>E possono <strong>caricarsi pi\u00f9 velocemente<\/strong> rispetto alla grafica raster.<\/li>\n<\/ul>\n\n\n\n<p>Un altro vantaggio dell&#8217;uso degli SVG \u00e8 la <strong>migliorata accessibilit\u00e0.<\/strong> Puoi modificare questi file localmente sui dispositivi, in base alle esigenze dell&#8217;utente, e i lettori di schermo possono interpretarli.<\/p>\n\n\n\n<p>Lo svantaggio degli SVG \u00e8 che possono diventare molto grandi se includi molti dettagli. Inoltre, non puoi ottimizzarli allo stesso modo delle immagini raster. Se vuoi condividere fotografie, probabilmente \u00e8 meglio optare per un JPEG.<\/p>\n\n\n\n<p>Ma per gran parte degli altri contenuti visivi, il formato SVG \u00e8 un&#8217;ottima opzione.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Caratteristica<\/strong><\/td><td><strong>SVG<\/strong><\/td><td><strong>JPEG<\/strong><\/td><td><strong>PNG<\/strong><\/td><td><strong>GIF<\/strong><\/td><\/tr><tr><td>Scalabilit\u00e0<\/td><td>Forte \u2705<\/td><td>No \u274c<\/td><td>No \u274c<\/td><td>No \u274c<\/td><\/tr><tr><td>Dimensione del File<\/td><td>Generalmente piccola \u2705<\/td><td>Pu\u00f2 essere piccola \u2705<\/td><td>Spesso grande \u274c<\/td><td>Piccola per immagini semplici \u2705<\/td><\/tr><tr><td>Trasparenza<\/td><td>S\u00ec \u2705<\/td><td>No \u274c<\/td><td>S\u00ec \u2705<\/td><td>S\u00ec, ma limitata \u26a0\ufe0f<\/td><\/tr><tr><td>Animazione<\/td><td>Certo! ?<\/td><td>No \u274c<\/td><td>No \u274c<\/td><td>Solo base \u26a0\ufe0f<\/td><\/tr><tr><td>Migliore per<\/td><td>Grafica, icone, loghi&nbsp;<\/td><td>Foto<\/td><td>Immagini che richiedono trasparenza<\/td><td>Animazioni semplici<\/td><\/tr><tr><td>Modificabilit\u00e0<\/td><td>Con il codice! ?<\/td><td>No \u274c<\/td><td>No \u274c<\/td><td>No \u274c<\/td><\/tr><tr><td>Supporto Browser<\/td><td>La maggior parte dei browser moderni \u2705<\/td><td>Tutti i browser \u2705<\/td><td>Tutti i browser \u2705<\/td><td>Tutti i browser \u2705<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Utilizzi Comuni delle Immagini SVG<\/h3>\n\n\n\n<p>Anche se gli SVG sono piuttosto versatili, appaiono principalmente nel web design come:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Icone:<\/strong> Dai link dei social media ai pulsanti del carrello, le icone SVG appaiono nitide su qualsiasi dispositivo.<\/li>\n\n\n\n<li><strong>Loghi:<\/strong> Salvare il tuo <a href=\"https:\/\/www.dreamhost.com\/blog\/make-logo-online-free\/\" target=\"_blank\" rel=\"noreferrer noopener\">logo di marca<\/a> come un SVG garantisce che apparir\u00e0 perfetto ovunque \u2014 dai piccoli schermi mobili ai grandi cartelloni pubblicitari.<\/li>\n\n\n\n<li><strong>Illustrazioni:<\/strong> Molti siti web ora utilizzano illustrazioni SVG piuttosto che immagini stock. Anche quando la grafica \u00e8 molto dettagliata, si scala perfettamente.<\/li>\n\n\n\n<li><strong>Animazioni:<\/strong> S\u00ec, gli SVG possono muoversi! Puoi animarli per quel tocco in pi\u00f9 sul tuo sito web, come un logo che gira o un personaggio che balla.<\/li>\n\n\n\n<li><strong>Infografiche<\/strong>: Poich\u00e9 gli SVG sono scalabili, puoi anche utilizzarli per costruire interattive <a href=\"https:\/\/www.dreamhost.com\/blog\/ga4-explorations-template-gallery\/\" target=\"_blank\" rel=\"noreferrer noopener\">visualizzazioni dei dati<\/a>. Molto figo!<\/li>\n<\/ul>\n\n\n\n<h2 id=\"h2_working-with-svgs-create-or-copy\" class=\"wp-block-heading\">Lavorare Con SVG: Creare o Copiare?<\/h2>\n\n\n\n<p>Okay, basta lodi entusiastiche. \u00c8 ora di mettersi al lavoro.<\/p>\n\n\n\n<p>Se vuoi integrare gli SVG nei tuoi progetti digitali, devi prendere alcuni design pronti all&#8217;uso o creare le tue grafiche da zero.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Trovare SVG Gratuiti<\/h3>\n\n\n\n<p>Usare i progetti di qualcun altro \u00e8 l&#8217;opzione pi\u00f9 semplice. E fortunatamente, migliaia di SVG sono disponibili per il download online.<\/p>\n\n\n\n<p>Molti sono gratuiti per progetti personali, ma potresti dover pagare per l&#8217;uso commerciale.<\/p>\n\n\n\n<p>Ecco alcune delle nostre risorse preferite:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Font Awesome<\/a>: Un popolare pacchetto di icone SVG.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.freepik.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Freepik<\/a>: Enorme database di grafiche vettoriali, illustrazioni e icone.<\/li>\n\n\n\n<li><a href=\"https:\/\/lineicons.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Lineicons<\/a>: Pacchetto di oltre 8,400 icone semplici e pulite.<\/li>\n\n\n\n<li><a href=\"https:\/\/freesvg.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Free SVG<\/a>: Biblioteca di illustrazioni SVG completamente gratuite.&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/www.opendoodles.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Open Doodles<\/a>: Illustrazioni gratuite e colorate di persone a carattere ludico.<\/li>\n\n\n\n<li><a href=\"https:\/\/iconscout.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">IconScout<\/a>: Biblioteca ricercabile di oltre 9,5 milioni di risorse, incluse icone gratuite e a pagamento, illustrazioni, loghi e altro.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.drawkit.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">DrawKit<\/a>: Vari pacchetti di illustrazioni 2D\/3D, gratuite e premium.<\/li>\n\n\n\n<li><a href=\"https:\/\/undraw.co\/illustrations\" target=\"_blank\" rel=\"noreferrer noopener\">unDraw<\/a>: Un sacco di ottime illustrazioni SVG gratuite.<\/li>\n<\/ul>\n\n\n\n<p>Ricorda che puoi modificare qualsiasi SVG che scarichi. Quindi, puoi usare i file gratuiti come punto di partenza per le tue creazioni.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"h2_how-to-create-and-edit-svg-files\" class=\"wp-block-heading\">Come Creare e Modificare File SVG<\/h2>\n\n\n\n<p>Non riesci a trovare ci\u00f2 di cui hai bisogno online? Non preoccuparti. Modificare gli SVG \u00e8 un gioco da ragazzi.<\/p>\n\n\n\n<p>Ecco una rapida guida:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Scegli Il Tuo Software<\/h3>\n\n\n\n<p>Il modo pi\u00f9 semplice per modificare gli SVG \u00e8 con un editor di grafica vettoriale. Ecco alcune opzioni popolari:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Adobe Illustrator<\/strong> ($$$): Il campione dei pesi massimi. Costoso, ma potente.<\/li>\n\n\n\n<li><strong>Inkscape <\/strong>(gratis): L&#8217;alternativa gratuita che non ha nulla da invidiare.<\/li>\n\n\n\n<li><strong>Figma <\/strong>($): Ottimo per il lavoro di design collaborativo.<\/li>\n\n\n\n<li><strong>Sketch <\/strong>($): Un&#8217;alternativa pi\u00f9 leggera a Illustrator, popolare tra i designer di interfacce.<\/li>\n<\/ul>\n\n\n\n<p>Baseremo il resto di questa guida su Inkscape, ma il processo appare molto simile nella maggior parte delle app di modifica vettoriale.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Configura la Tua Tela<\/h3>\n\n\n\n<p>Se stai iniziando da zero, dovrai creare una tela per il tuo lavoro. In Inkscape, visita <strong>File <\/strong>&gt;<strong> Nuovo<\/strong> e scegli le dimensioni per la tua nuova immagine.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1020\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas.webp\" alt=\"screenshot dell'opzione &quot;Nuovo&quot; situata sotto File nel menu di navigazione superiore\" class=\"wp-image-49636 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-300x191.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-1024x653.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-768x490.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-1536x979.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-600x383.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-1200x765.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-730x465.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-1460x931.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-784x500.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-1568x1000.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-877x559.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1020;\" \/><\/figure>\n\n\n\n<p>Se vuoi modificare un documento SVG esistente, vai su <strong>File &gt; Apri<\/strong> per avviare l&#8217;editor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Disegna Il Tuo Progetto<\/h3>\n\n\n\n<p>Lo strumento pi\u00f9 importante nella modifica vettoriale \u00e8 lo strumento <strong>Bezier<\/strong>. Puoi selezionarlo dalla barra degli strumenti sulla sinistra del tuo spazio di lavoro. L&#8217;icona sembra una penna stilografica che disegna una linea curva.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1219\" height=\"821\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design.webp\" alt=\"screenshot posizione dello strumento Bezier che sembra il cappuccio di una penna stilografica accanto a una linea disegnata\" class=\"wp-image-49638 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design.webp 1219w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-300x202.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-1024x690.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-768x517.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-600x404.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-1200x808.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-730x492.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-784x528.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-877x591.webp 877w\" data-sizes=\"(max-width: 1219px) 100vw, 1219px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1219px; --smush-placeholder-aspect-ratio: 1219\/821;\" \/><\/figure>\n\n\n\n<p>Questo strumento ti permette di creare linee rette e curve perfette con pochi clic.<\/p>\n\n\n\n<p>Ogni forma che crei contiene percorsi e punti individuali, che sono registrati nel codice XML sottostante.<\/p>\n\n\n\n<p>Utilizzando lo strumento Bezier, puoi facilmente tornare indietro e regolare questi punti e percorsi dopo averli creati. Una volta che sei soddisfatto della struttura, aggiungi i tuoi <a href=\"https:\/\/www.dreamhost.com\/blog\/website-color-schemes\/\" target=\"_blank\" rel=\"noreferrer noopener\">colori personali<\/a> tramite il pannello delle <strong>Propriet\u00e0 dell&#8217;oggetto<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1219\" height=\"821\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives.webp\" alt=\"barra di navigazione superiore con discesa da &quot;Object&quot; a &quot;Propriet\u00e0 dell'oggetto&quot;\" class=\"wp-image-49640 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives.webp 1219w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-300x202.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-1024x690.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-768x517.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-600x404.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-1200x808.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-730x492.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-784x528.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-877x591.webp 877w\" data-sizes=\"(max-width: 1219px) 100vw, 1219px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1219px; --smush-placeholder-aspect-ratio: 1219\/821;\" \/><\/figure>\n\n\n\n<p>Le opzioni delle propriet\u00e0 dell&#8217;oggetto appariranno nel menu a destra.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"900\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties.webp\" alt=\"screenshot del menu delle propriet\u00e0 dell'oggetto ora aperto sul menu di destra che mostra variazioni di colore e di pattern. \" class=\"wp-image-49642 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-300x169.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-1024x576.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-768x432.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-1536x864.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-600x338.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-1200x675.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-730x411.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-1460x821.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-784x441.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-1568x882.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-877x493.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/900;\" \/><\/figure>\n\n\n\n<p><strong>Consiglio Pro:<\/strong> Vuoi approfondire la modifica dei vettori? Inkscape ha una fantastica biblioteca di tutorial gratuiti proprio <a href=\"https:\/\/inkscape.org\/learn\/tutorials\/\" target=\"_blank\" rel=\"noreferrer noopener\">qui<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Salva Come SVG<\/h3>\n\n\n\n<p>Una volta che sei soddisfatto della tua grafica, vai su <strong>File &gt;<\/strong><strong>Salva con nome<\/strong>, e scegli <strong>SVG<\/strong> come formato.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"900\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg.webp\" alt=\"Menu a discesa da &quot;file&quot; a &quot;apri&quot; \" class=\"wp-image-49644 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-300x169.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-1024x576.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-768x432.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-1536x864.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-600x338.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-1200x675.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-730x411.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-1460x821.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-784x441.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-1568x882.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-877x493.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/900;\" \/><\/figure>\n\n\n\n<p>Dagli un nome accattivante e salva!<\/p>\n\n\n\n<h2 id=\"h2_how-to-add-svgs-to-your-website\" class=\"wp-block-heading\">Come Aggiungere SVG Al Tuo Sito Web<\/h2>\n\n\n\n<p>Hai creato il tuo capolavoro vettoriale. Ora, il mondo merita di vederlo.&nbsp;<\/p>\n\n\n\n<p>Puoi incorporare SVG nel HTML del tuo sito web. Tutto ci\u00f2 di cui hai bisogno \u00e8 un tag <strong><code>&lt;img&gt;<\/code><\/strong> che punti al tuo file. Dovrebbe assomigliare a qualcosa del genere:<\/p>\n\n\n\n<p><code>&lt;img src=\"my-awesome-svg.svg\" alt=\"Il Mio Fantastico SVG\"&gt;<\/code><\/p>\n\n\n\n<p>In alternativa, puoi inserire il codice XML del tuo file SVG direttamente nella tua pagina web utilizzando il tag <strong><code>&lt;svg&gt;<\/code><\/strong>.<\/p>\n\n\n\n<p>Ecco un esempio:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;svg width=\"200\" height=\"200\"&gt;\n  &lt;circle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"red\" stroke-width=\"2\" fill=\"green\" \/&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n\n\n\n<p>Questo codice produrr\u00e0 un bel bottone rotondo, con un contorno rosso e un interno verde.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Abilitare SVG in WordPress<\/h3>\n\n\n\n<p>Aggiungere singole immagini tramite HTML \u00e8 un processo molto lento. Potresti preferire caricare SVG tramite il tuo CMS (sistema di gestione dei contenuti).<\/p>\n\n\n\n<p>Ma c&#8217;\u00e8 un problema per gli utenti di WordPress.<\/p>\n\n\n\n<p>Per impostazione predefinita, WordPress non supporta nativamente il caricamento di SVG. Questo perch\u00e9 gli attori malintenzionati possono utilizzare gli SVG per distribuire malware.<\/p>\n\n\n\n<p>Il modo pi\u00f9 semplice per abilitare gli SVG \u00e8 installando un plugin come<a href=\"https:\/\/en-gb.wordpress.org\/plugins\/safe-svg\/\" target=\"_blank\" rel=\"noreferrer noopener\"> Safe SVG<\/a> o<a href=\"https:\/\/en-gb.wordpress.org\/plugins\/svg-support\/\" target=\"_blank\" rel=\"noreferrer noopener\"> SVG Support<\/a>. Questi strumenti controllano ogni caricamento per assicurarsi che non ci sia nulla di dannoso all&#8217;interno.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1362\" height=\"717\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg.webp\" alt=\"screenshot della schermata di download di Safe SVG\" class=\"wp-image-49647 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg.webp 1362w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-300x158.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-1024x539.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-768x404.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-600x316.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-1200x632.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-730x384.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-784x413.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-877x462.webp 877w\" data-sizes=\"(max-width: 1362px) 100vw, 1362px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1362px; --smush-placeholder-aspect-ratio: 1362\/717;\" \/><\/figure>\n\n\n\n<p>Puoi quindi caricare e inserire SVG attraverso la Libreria Media di WordPress. Semplicemente naviga in <strong>Media &gt; Aggiungi Nuovo<\/strong>, e scegli la grafica che desideri includere.<\/p>\n\n\n\n<h2 id=\"h2_styling-svgs-with-css\" class=\"wp-block-heading\">Stilizzare SVG con CSS<\/h2>\n\n\n\n<p>Se incorpori file SVG utilizzando il tag <strong><code>&lt;svg&gt;<\/code><\/strong>, puoi modificare l&#8217;aspetto delle tue immagini tramite CSS.<\/p>\n\n\n\n<p>Diciamo che hai creato una grafica verde, ma vuoi che appaia rossa sul tuo sito web. Invece di creare una nuova copia, puoi semplicemente scrivere lo stile seguente:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>svg {\n  stroke: red;\n  fill: blue;\n}<\/code><\/pre>\n\n\n\n<p>L&#8217;attributo <strong><code>stroke<\/code><\/strong> definisce quale colore dovrebbe avere il contorno della tua grafica. Nel frattempo, l&#8217;attributo <strong><code>fill<\/code><\/strong> controlla il colore tra le linee.<\/p>\n\n\n\n<p><strong>Suggerimento utile: <\/strong>Ci sono<a href=\"https:\/\/css-tricks.com\/svg-properties-and-css\/\" target=\"_blank\" rel=\"noreferrer noopener\"> <em>molti pi\u00f9<\/em><\/a> attributi con cui giocare.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Rendere Responsive le Tue Immagini SVG<\/h3>\n\n\n\n<p>I file SVG sono infinitamente scalabili, quindi puoi utilizzarli nei design responsive. Richiede solo un po&#8217; di magia CSS.<\/p>\n\n\n\n<p>Ecco una guida passo passo:<\/p>\n\n\n\n<p><strong>1. Incorpora la tua immagine utilizzando il tag <code>&lt;svg&gt;<\/code>.<\/strong> Questo significa che puoi apportare modifiche tramite CSS.<\/p>\n\n\n\n<p><strong>2. Rimuovi le dimensioni di altezza e larghezza. <\/strong>Questo costringer\u00e0 il tuo SVG ad adattarsi al suo contenitore. Assicurati che la parte <strong><code>viewBox<\/code><\/strong> rimanga. Dovrebbe apparire qualcosa di simile:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;svg viewBox=\"0 0 20 20\" xmlns=\"https:\/\/example.com\/file.svg\"&gt;\n  &lt;!-- svg content here --&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n\n\n\n<p><strong>3. Imposta la dimensione massima del tuo SVG.<\/strong> Questo impedisce all&#8217;immagine di fuoriuscire dal suo contenitore. Ad esempio:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>svg {\n  display: inline-block;\n  max-width: 100%;\n}<\/code><\/pre>\n\n\n\n<p>E hai finito!<\/p>\n\n\n\n<p><strong>Consiglio professionale:<\/strong> Se tutto ci\u00f2 ti sembra un po&#8217; tecnico, prova <a href=\"https:\/\/app.zipwp.com\/pricing\/?aff=933feb1e\" target=\"_blank\" rel=\"noreferrer noopener\">ZipWP<\/a>. \u00c8 un costruttore di siti web alimentato da IA che gestisce lo stile per te.<\/p>\n\n\n\n<h2 id=\"h2_svg-masterclass-4-advanced-tips\" class=\"wp-block-heading\">Masterclass SVG: 4 Consigli Avanzati<\/h2>\n\n\n\n<p>Abbiamo trattato le basi della creazione e condivisione degli SVG. Per concludere questa guida, esaminiamo alcune tecniche avanzate.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Anima Le Tue Grafiche SVG<\/h3>\n\n\n\n<p>Sapevi che puoi far ballare i tuoi SVG? S\u00ec, l&#8217;<a href=\"https:\/\/www.dreamhost.com\/blog\/css-animation\/\" target=\"_blank\" rel=\"noreferrer noopener\">animazione<\/a> funziona su questo tipo di file.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"902\" height=\"492\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/loading-animation.gif\" alt=\"semplice animazione di un pulsante &quot;Caricamento&quot; che si muove su e gi\u00f9 su uno sfondo grafico nero solido\" class=\"wp-image-49653 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 902px; --smush-placeholder-aspect-ratio: 902\/492;\" \/><\/figure>\n\n\n\n<p>Come con l&#8217;immagine originale, puoi animare la tua grafica usando semplice codice XML. Basta aggiungere un elemento <strong><code>&lt;animate&gt;<\/code> <\/strong>all&#8217;interno della tua forma per mettere tutto in movimento.<\/p>\n\n\n\n<p>Dovrebbe apparire qualcosa del genere:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;svg width=\"100%\" height=\"auto\" xmlns=\"https:\/\/example.com\/file.svg\"&gt;\n  &lt;circle cx=\"50\" cy=\"50\" r=\"50\" style=\"fill:red;\"&gt;\n    &lt;animate\n      attributeName=\"cx\"\n      begin=\"0s\"\n      dur=\"5s\"\n      from=\"30\"\n      to=\"90%\"\n      repeatCount=\"indefinite\" \/&gt;\n  &lt;\/circle&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n\n\n\n<p>Puoi usare questa tecnica per aggiungere un po&#8217; di movimento alle icone, creare un indicatore di caricamento della pagina o persino progettare annunci pubblicitari animati.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Utilizza Sprite SVG per Tempi di Caricamento Pi\u00f9 Rapidi<\/h3>\n\n\n\n<p>Gli sprite SVG sono come un album dei grandi successi per le tue icone. Invece di avere dozzine di singoli file di icone, li raggruppi tutti in un unico SVG.<\/p>\n\n\n\n<p>Questo significa che devi fare solo una richiesta HTTP per pagina, indipendentemente dal numero di icone che stai utilizzando. \u00c8 un ottimo modo per ridurre i tempi di caricamento e risparmiare larghezza di banda.<\/p>\n\n\n\n<p>Molti pacchetti di icone vengono forniti sotto forma di sprite oggigiorno. Puoi <a href=\"https:\/\/hackernoon.com\/how-to-create-svg-sprite-with-icons\" target=\"_blank\" rel=\"noreferrer noopener\">creare il tuo<\/a> anche tu.<\/p>\n\n\n\n<p>Per incorporare un&#8217;icona specifica sul tuo sito, basta individuare l&#8217;area del file sprite dove quell&#8217;icona \u00e8 salvata. Puoi farlo utilizzando codice CSS di base:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#button {\n  width: 20px;\n  height: 20px;\n  background: url('sprite.svg') -128px 0;\n}<\/code><\/pre>\n\n\n\n<p><strong>Consiglio pro: <\/strong>Consigliamo di utilizzare uno strumento online come<a href=\"https:\/\/www.toptal.com\/developers\/css\/sprite-generator\/\" target=\"_blank\" rel=\"noreferrer noopener\"> CSS Sprites Generator<\/a> per calcolare le distanze corrette.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Ottimizza I Tuoi File SVG per Migliori Prestazioni<\/h3>\n\n\n\n<p>Anche se i file SVG partono gi\u00e0 piccoli, puoi ottimizzarli per renderli ancora pi\u00f9 leggeri.<\/p>\n\n\n\n<p>Ecco come fare:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Usa uno strumento come<\/strong><a href=\"https:\/\/jakearchibald.github.io\/svgomg\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong> SVGOMG<\/strong><\/a>. S\u00ec, esiste davvero. \u00c8 una piccola applicazione web fantastica che ti permette di comprimere SVG senza perdere qualit\u00e0.<\/li>\n\n\n\n<li><strong>Semplifica i percorsi dove possibile<\/strong>. Forme complicate possono trasformarsi in grandi quantit\u00e0 di codice XML. Molti editor di grafica vettoriale hanno strumenti per questo compito. (Si trova sotto <strong>Percorso &gt; Semplifica<\/strong> in Inkscape).<\/li>\n\n\n\n<li><strong>Considera il caricamento pigro per gli SVG sotto la piega.<\/strong> Ritardando il caricamento delle immagini pi\u00f9 in basso nella pagina, puoi ridurre l&#8217;impatto di molteplici immagini.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4. Rendi Accessibili Le Tue Grafiche<\/h3>\n\n\n\n<p>Poich\u00e9 gli SVG sono file basati su testo, sono facili da comprendere per i lettori di schermo e altri software di assistenza.<\/p>\n\n\n\n<p>Detto ci\u00f2, ci sono ancora passi che puoi compiere per renderli ancora pi\u00f9 accessibili:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Includi i tag <code>&lt;title&gt;<\/code> e <code>&lt;desc&gt;<\/code> nei tuoi file SVG<\/strong>. Questi elementi forniscono descrizioni della grafica, particolarmente utili per gli utenti che utilizzano lettori di schermo.<\/li>\n\n\n\n<li><strong>Aggiungi un attributo <code>role=\"img\"<\/code><\/strong>. Questo informa le tecnologie assistive che l&#8217;SVG \u00e8 un&#8217;immagine.<\/li>\n\n\n\n<li><strong>Compila l&#8217;attributo <code>aria-labelledby<\/code><\/strong>, che dovrebbe fare riferimento agli ID dei tag <code>&lt;title&gt;<\/code> e <code>&lt;desc&gt;<\/code>, collegandoli come etichette per l&#8217;immagine.<\/li>\n\n\n\n<li><strong>Per SVG pi\u00f9 complessi, fornisci un testo alternativo<\/strong>. Descrivi l&#8217;immagine, cos\u00ec i lettori di schermo hanno meno da interpretare.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"666\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible.webp\" alt=\"animazione semplice di un pulsante &quot;Caricamento&quot; che si muove su e gi\u00f9 su uno sfondo grafico nero solido\" class=\"wp-image-49649 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-300x125.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-1024x426.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-768x320.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-1536x639.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-600x250.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-1200x500.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-730x304.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-1460x608.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-784x326.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-1568x653.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-877x365.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/666;\" \/><\/figure>\n\n\n\n<p>Un ulteriore vantaggio nel rendere gli SVG super-accessibili \u00e8 che li stai anche ottimizzando per la ricerca. Vittoria SEO!<\/p>\n\n\n\n<h2 id=\"h2_taking-care-of-business\" class=\"wp-block-heading\">Prendersi Cura Degli Affari<\/h2>\n\n\n\n<p>Proprio come Elvis si occupava degli affari sul palco, gli SVG possono aiutarti a occuparti degli affari sul tuo sito web. Queste grafiche versatili e scalabili offrono un mondo di possibilit\u00e0 per web designer e sviluppatori allo stesso modo.<\/p>\n\n\n\n<p>Dai loghi nitidi e icone responsive a animazioni interattive e visual accessibili, gli SVG sono gli eroi non celebrati del <a href=\"https:\/\/www.dreamhost.com\/blog\/elements-of-webdesign\/\" target=\"_blank\" rel=\"noreferrer noopener\">web design moderno<\/a>.<\/p>\n\n\n\n<p>Dopo aver consultato questa guida, dovresti sentirti abbastanza sicuro nell&#8217;usare SVG nei tuoi progetti. Ma il tuo hosting \u00e8 all&#8217;altezza della prova?<\/p>\n\n\n\n<p>Se vuoi assicurarti che il tuo sito possa gestire tonnellate di grafiche di alta qualit\u00e0, considera di passare a DreamHost.<\/p>\n\n\n\n<p>I nostri<a href=\"https:\/\/www.dreamhost.com\/hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\"> piani di hosting<\/a> includono tutti una larghezza di banda illimitata (escluso l&#8217;hosting cloud), il che significa che non devi preoccuparti se il tuo sito riceve molti visitatori.<\/p>\n\n\n\n<h2 id=\"h2_fun-faqs-about-svgs\" class=\"wp-block-heading\">Domande Frequenti Divertenti Sugli SVG<\/h2>\n\n\n\n<p>Se sei ancora curioso riguardo agli SVG, \u00e8 completamente normale. Abbiamo altre conoscenze da condividere. Ecco un rapido riepilogo di alcune domande che potremmo aver tralasciato:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Come converti SVG in JPEG?<strong>&nbsp;<\/strong><\/h3>\n\n\n\n<p>Puoi farlo rapidamente utilizzando un editor di vettori desktop o uno strumento online come<a href=\"https:\/\/cloudconvert.com\/svg-to-jpg\" target=\"_blank\" rel=\"noreferrer noopener\"> CloudConvert<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-puoi-modificare-gli-svg-direttamente-in-un-editor-di-testo\">Puoi modificare gli SVG direttamente in un editor di testo?<\/h3>\n\n\n\n<p>S\u00ec! Gli SVG sono basati su XML, quindi puoi modificare direttamente il loro codice.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-e-l-svg-piu-nitido-del-png\">\u00c8 L&#8217;SVG Pi\u00f9 Nitido Del PNG?<\/h3>\n\n\n\n<p>Nella maggior parte dei casi, s\u00ec. Questo \u00e8 particolarmente evidente se tenti di ingrandire un file PNG.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-puoi-modificare-gli-svg-utilizzando-javascript\">Puoi modificare gli SVG utilizzando JavaScript?<\/h3>\n\n\n\n<p>S\u00ec, puoi. Questo \u00e8 utile per cambiamenti dinamici basati sugli input degli utenti.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-gli-svg-sono-supportati-in-tutti-i-browser\">Gli SVG sono supportati in tutti i browser?<\/h3>\n\n\n\n<p>Gli SVG sono supportati in tutti i browser web moderni, inclusi Chrome, Firefox, Safari ed Edge.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<p><em>Questa pagina contiene link di affiliazione. Questo significa che potremmo guadagnare una commissione se acquisti servizi attraverso il nostro link senza alcun costo aggiuntivo per te.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vuoi grafiche nitide e chiare che rendano il tuo sito web splendido a qualsiasi dimensione? Scopri come creare, ottimizzare e utilizzare i file SVG con la nostra guida.<\/p>\n","protected":false},"author":1058,"featured_media":49599,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Vuoi grafiche nitide e chiare che rendano il tuo sito web splendido a qualsiasi scala? Scopri come creare, ottimizzare e utilizzare i file SVG con la nostra guida.","toc_headlines":"[[\"h-the-abcs-of-svgs-understanding-image-files\",\"L'ABC degli SVG: Capire i File di Immagine\"],[\"h2_working-with-svgs-create-or-copy\",\"Lavorare Con SVG: Creare o Copiare?\"],[\"h2_how-to-create-and-edit-svg-files\",\"Come Creare e Modificare File SVG\"],[\"h2_how-to-add-svgs-to-your-website\",\"Come Aggiungere SVG Al Tuo Sito Web\"],[\"h2_styling-svgs-with-css\",\"Stilizzare SVG con CSS\"],[\"h2_svg-masterclass-4-advanced-tips\",\"Masterclass SVG: 4 Consigli Avanzati\"],[\"h2_taking-care-of-business\",\"Prendersi Cura Degli Affari\"],[\"h2_fun-faqs-about-svgs\",\"Domande Frequenti Divertenti Sugli SVG\"]]","hide_toc":false,"footnotes":""},"categories":[15068],"tags":[],"class_list":["post-68620","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-design-it"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>TCB Con SVG: Come Creare e Utilizzare File SVG Sul Tuo Sito Web - DreamHost Blog<\/title>\n<meta name=\"description\" content=\"Vuoi grafiche nitide e chiare che rendano il tuo sito web splendido a qualsiasi scala? Scopri come creare, ottimizzare e utilizzare i file SVG con la nostra guida.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/it\/tcb-con-svg-come-creare-e-utilizzare-file-svg-sul-tuo-sito-web-it\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"TCB Con SVG: Come Creare e Utilizzare File SVG Sul Tuo Sito Web\" \/>\n<meta property=\"og:description\" content=\"Vuoi grafiche nitide e chiare che rendano il tuo sito web splendido a qualsiasi scala? Scopri come creare, ottimizzare e utilizzare i file SVG con la nostra guida.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/it\/tcb-con-svg-come-creare-e-utilizzare-file-svg-sul-tuo-sito-web-it\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-23T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-07T20:45:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Ian Hernandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Hernandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"TCB Con SVG: Come Creare e Utilizzare File SVG Sul Tuo Sito Web - DreamHost Blog","description":"Vuoi grafiche nitide e chiare che rendano il tuo sito web splendido a qualsiasi scala? Scopri come creare, ottimizzare e utilizzare i file SVG con la nostra guida.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/it\/tcb-con-svg-come-creare-e-utilizzare-file-svg-sul-tuo-sito-web-it\/","og_locale":"en_US","og_type":"article","og_title":"TCB Con SVG: Come Creare e Utilizzare File SVG Sul Tuo Sito Web","og_description":"Vuoi grafiche nitide e chiare che rendano il tuo sito web splendido a qualsiasi scala? Scopri come creare, ottimizzare e utilizzare i file SVG con la nostra guida.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/it\/tcb-con-svg-come-creare-e-utilizzare-file-svg-sul-tuo-sito-web-it\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2024-09-23T14:00:00+00:00","article_modified_time":"2025-10-07T20:45:58+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp","type":"image\/webp"}],"author":"Ian Hernandez","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Ian Hernandez","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/tcb-con-svg-come-creare-e-utilizzare-file-svg-sul-tuo-sito-web-it\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/tcb-con-svg-come-creare-e-utilizzare-file-svg-sul-tuo-sito-web-it\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"TCB Con SVG: Come Creare e Utilizzare File SVG Sul Tuo Sito Web","datePublished":"2024-09-23T14:00:00+00:00","dateModified":"2025-10-07T20:45:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/tcb-con-svg-come-creare-e-utilizzare-file-svg-sul-tuo-sito-web-it\/"},"wordCount":2399,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/tcb-con-svg-come-creare-e-utilizzare-file-svg-sul-tuo-sito-web-it\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp","articleSection":["Design del Sito Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/tcb-con-svg-come-creare-e-utilizzare-file-svg-sul-tuo-sito-web-it\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/it\/tcb-con-svg-come-creare-e-utilizzare-file-svg-sul-tuo-sito-web-it\/","name":"TCB Con SVG: Come Creare e Utilizzare File SVG Sul Tuo Sito Web - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/tcb-con-svg-come-creare-e-utilizzare-file-svg-sul-tuo-sito-web-it\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/tcb-con-svg-come-creare-e-utilizzare-file-svg-sul-tuo-sito-web-it\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp","datePublished":"2024-09-23T14:00:00+00:00","dateModified":"2025-10-07T20:45:58+00:00","description":"Vuoi grafiche nitide e chiare che rendano il tuo sito web splendido a qualsiasi scala? Scopri come creare, ottimizzare e utilizzare i file SVG con la nostra guida.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/tcb-con-svg-come-creare-e-utilizzare-file-svg-sul-tuo-sito-web-it\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/it\/tcb-con-svg-come-creare-e-utilizzare-file-svg-sul-tuo-sito-web-it\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/tcb-con-svg-come-creare-e-utilizzare-file-svg-sul-tuo-sito-web-it\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp","width":1460,"height":1095,"caption":"TCB With SVG: How To Create and Use SVG Files on Your Website"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/tcb-con-svg-come-creare-e-utilizzare-file-svg-sul-tuo-sito-web-it\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"TCB Con SVG: Come Creare e Utilizzare File SVG Sul Tuo Sito Web"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96","name":"Ian Hernandez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","caption":"Ian Hernandez"},"description":"Ian is a Product Designer based in Los Angeles, California. He is responsible for driving brand and product design at DreamHost, developing and maintaining our internal design system, and writing frontend code when he can. In his free time, he enjoys walking his dog, learning history, and discovering new music online and irl. Connect with him on LinkedIn: https:\/\/www.linkedin.com\/in\/ianhernandez23\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/ianh\/"}]}},"lang":"it","translations":{"it":68620,"es":49610,"en":49598,"ru":52725,"de":55872,"pt":55918,"pl":55924,"uk":55935,"fr":70813,"nl":70839},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/68620","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1058"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=68620"}],"version-history":[{"count":3,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/68620\/revisions"}],"predecessor-version":[{"id":76374,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/68620\/revisions\/76374"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/49599"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=68620"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=68620"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=68620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}