{"id":830,"date":"2017-11-22T18:59:07","date_gmt":"2017-11-22T16:59:07","guid":{"rendered":"https:\/\/www.robertomaiolino.it\/blografik\/?p=830"},"modified":"2026-05-22T13:30:45","modified_gmt":"2026-05-22T11:30:45","slug":"inline-svg-per-il-web","status":"publish","type":"post","link":"https:\/\/www.robertomaiolino.it\/blografik\/2017\/11\/22\/inline-svg-per-il-web\/","title":{"rendered":"Inline SVG: Immagini perfette per il web"},"content":{"rendered":"<h3><img decoding=\"async\" class=\"alignnone size-full wp-image-836\" src=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2017\/11\/inline_svg.png\" alt=\"inline_svg\" width=\"1500\" height=\"750\" \/><\/h3>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><label class=\"ez-toc-title\" style=\"cursor:inherit\">In questo articolo<\/label>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2017\/11\/22\/inline-svg-per-il-web\/#Introduzione\" >Introduzione<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2017\/11\/22\/inline-svg-per-il-web\/#Il_vantaggio_dellSVG\" >Il vantaggio dell&#8217;SVG<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2017\/11\/22\/inline-svg-per-il-web\/#Inline_SVG_e_SVG_sprite\" >Inline SVG e SVG sprite<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2017\/11\/22\/inline-svg-per-il-web\/#Esempio_di_Inline_SVG_sprite\" >Esempio di Inline SVG sprite<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2017\/11\/22\/inline-svg-per-il-web\/#Considerazioni_e_commenti\" >Considerazioni e commenti<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.robertomaiolino.it\/blografik\/2017\/11\/22\/inline-svg-per-il-web\/#Conclusioni\" >Conclusioni<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"Introduzione\"><\/span>Introduzione<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ecco un piccolo <em>trick<\/em> per avere immagini vettoriali perfette grazie all&#8217;<strong>Inline SVG<\/strong>. Dopo aver subito un declino per alcuni anni, l&#8217;<strong>SVG<\/strong> torna in gran voga grazie anche alle nuove\u00a0<em>features\u00a0<\/em>introdotte con l&#8217;<strong>HTML 5.5<\/strong> e il <strong>CSS3.\u00a0<\/strong>Questo formato utilizzato spesso per realizzare icone per le pagine web, porta con se diversi vantaggi, al tal punto che l&#8217;utilizzo delle\u00a0<strong>Icon Font<\/strong>, ampiamente diffuse in questi ultimi anni per la facilit\u00e0 di utilizzo e resa grafica, sta subendo un significativo rallentamento. Questo perch\u00e9 la tecnica dell&#8217;<strong>Inline<\/strong>\u00a0<strong>SVG\u00a0<\/strong>risulta essere un&#8217;alternativa pi\u00f9 che valida con una resa grafica addirittura maggiore. In questo articolo scopriremo come sfruttare le <em>features<\/em> del codice <strong>HTML<\/strong> per inserire in maniera semplice e diretta un elemento creato con <a href=\"https:\/\/it.wikipedia.org\/wiki\/Grafica_vettoriale\">grafica vettoriale<\/a> all&#8217;interno delle nostre pagine web o articoli di un blog.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Il_vantaggio_dellSVG\"><\/span>Il vantaggio dell&#8217;SVG<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Anzitutto, bisogna ricordare che <strong>i font icona non sono resi &#8220;vettorialmente&#8221;<\/strong>\u00a0ma pi\u00f9 precisamente vengono ottimizzati come <strong>elementi testuali<\/strong>. Se si desidera una perfetta resa grafica, quindi, si pu\u00f2 fare uso delle tecniche di <strong>Inline SVG<\/strong>.<\/p>\n<p>Ma perch\u00e9 \u00e8 cosi vantaggioso utilizzare la grafica vettoriale e in particolare l&#8217;<strong>SVG<\/strong> per i nostri siti web? La sigla <strong>SVG<\/strong> vuol dire\u00a0<b>Scalable Vector Graphics<\/b>\u00a0e\u00a0indica una <a title=\"Tecnologia\" href=\"https:\/\/it.wikipedia.org\/wiki\/Tecnologia\">tecnologia<\/a> utilizzata per descrivere oggetti realizzati in\u00a0grafica vettoriale. Il suo linguaggio \u00e8 derivato dall&#8217;<a title=\"XML\" href=\"https:\/\/it.wikipedia.org\/wiki\/XML\"><strong>XML<\/strong><\/a>, un &#8220;<strong>meta-linguaggio<\/strong>&#8221; considerato uno standard degli sviluppi Web da parte del consorzio <a class=\"mw-redirect\" title=\"W3C\" href=\"https:\/\/www.w3.org\">W3C<\/a>. Trattandosi di grafica vettoriale, la geometria di ciascun elemento \u00e8 definita matematicamente attraverso dei vettori, anzich\u00e9 essere definita mediante\u00a0<a href=\"https:\/\/www.robertomaiolino.it\/blografik\/glossario\/\">pixel<\/a> come accade per la grafica <a href=\"https:\/\/www.robertomaiolino.it\/blografik\/glossario\/\">raster<\/a>.\u00a0Questo porta con se diversi vantaggi:<\/p>\n<ul>\n<li>Possibilit\u00e0 di ridimensionare a piacere qualsiasi elemento grafico mantenendone intatta la qualit\u00e0;<\/li>\n<li>Certezza di ottenere sempre la massima qualit\u00e0 su ogni sistema e supporto (Display, stampa etc..);<\/li>\n<li>Peso in termini di <em>dimensioni dei file<\/em>\u00a0\u00e8 considerevolmente ridotto rispetto a immagini raster.<\/li>\n<\/ul>\n<p>Due svantaggi, non trascurabili, sono la possibilit\u00e0 di utilizzare un numero ridotto di colori e il &#8220;<em>peso<\/em>&#8221; computazionale che impegna i processori a ricalcolare l&#8217;immagine in tempo reale ogni volta che si ridimensiona la visualizzazione. In un contesto come il web, utilizzare l&#8217;<strong>SVG<\/strong> per creare delle immagini semplici pu\u00f2 essere un&#8217;ottima soluzione per arricchire il nostro sito di icone senza allungare eccessivamente i tempi di caricamento della pagina.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Inline_SVG_e_SVG_sprite\"><\/span>Inline SVG e SVG sprite<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Esistono diverse soluzioni per implementare un&#8217;immagine <strong>SVG<\/strong>. Se vogliamo farlo utilizzando il codice <strong>HTML<\/strong>, direttamente nel nostro documento, possiamo utilizzare le <strong>tecniche inline.<\/strong> Una procedura\u00a0<em>inline<\/em> sicuramente efficace \u00e8 quella degli <strong>SVG sprite<\/strong>, una tecnica che permette di dichiarare gli elementi SVG in un solo punto del DOM,\u00a0richiamando poi, le immagini ovunque queste siano necessarie.<\/p>\n<p>Uno <em>sprite<\/em> \u00e8 quindi un insieme di <strong>elementi SVG raggruppati<\/strong>, definiti ognuno all\u2019interno di un <em>tag<\/em>\u00a0\u00a0<strong><em><span style=\"color: #339966;\">&lt;g&gt;<\/span>,\u00a0<\/em><\/strong>che indica al browser le &#8220;coordinate&#8221; per descrivere la nostra immagine.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Esempio_di_Inline_SVG_sprite\"><\/span>Esempio di Inline SVG sprite<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-837\" src=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2017\/11\/Screenshot-2017-11-22-17.46.53.png\" alt=\"icona_martello\" width=\"300\" height=\"207\" srcset=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2017\/11\/Screenshot-2017-11-22-17.46.53.png 136w, https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2017\/11\/Screenshot-2017-11-22-17.46.53-110x76.png 110w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>A questo punto non ci rimane che scoprire come utilizzare gli <em>sprite<\/em> per inserire immagini <strong>SVG<\/strong> in una pagina <em>html<\/em>. Per fare un esempio, supponiamo che voglio inserire l&#8217;icona, mostrata qui in alto, in una qualsiasi parte della mia pagina web. Sar\u00e0 sufficiente scrivere poche righe di codice.<\/p>\n<ul>\n<li><strong>Prima parte &gt;<\/strong>\u00a0Innanzitutto, utilizziamo questo codice per\u00a0descrive la mia icona.\u00a0Possiamo sostituire il valore di &#8220;<span style=\"color: #ff6600;\">d<\/span>&#8221; in base all&#8217;immagine che vogliamo descrivere:<\/li>\n<\/ul>\n<p class=\"code-cit\"><span style=\"color: #339966;\">&lt;svg<\/span><br \/>\n<span style=\"color: #ff6600;\">display<\/span>=&#8221;none&#8221;<br \/>\n<span style=\"color: #ff6600;\">version<\/span>=&#8221;1.1&#8243;<br \/>\n<span style=\"color: #ff6600;\">xmlns<\/span>=&#8221;http:\/\/www.w3.org\/2000\/svg&#8221;<br \/>\n<span style=\"color: #ff6600;\">xmlns:xlink<\/span>=&#8221;http:\/\/www.w3.org\/1999\/xlink&#8221;<br \/>\n<span style=\"color: #ff6600;\">width<\/span>=&#8221;32&#8243;<br \/>\n<span style=\"color: #ff6600;\">height<\/span>=&#8221;32&#8243;<br \/>\n<span style=\"color: #ff6600;\">viewBox<\/span>=&#8221;0 0 32 32&#8243;<span style=\"color: #339966;\">&gt;<\/span><br \/>\n<span style=\"color: #339966;\">&lt;defs&gt;<\/span><br \/>\n<span style=\"color: #339966;\">&lt;g<\/span> <span style=\"color: #ff6600;\">id<\/span>=&#8221;<span style=\"color: #99ccff;\">icon-design<\/span>&#8220;<span style=\"color: #339966;\">&gt;<\/span><br \/>\n<span style=\"color: #339966;\">&lt;path<\/span> <span style=\"color: #ff6600;\">class<\/span>=&#8221;<span style=\"color: #99ccff;\">path1<\/span>&#8221; <span style=\"color: #ff6600;\">d<\/span>=&#8221;M31.562 25.905l-9.423-9.423c-0.583-0.583-1.538-0.583-2.121 0l-0.707 0.707-5.75-5.75 9.439-9.439h-10l-4.439 4.439-0.439-0.439h-2.121v2.121l0.439 0.439-6.439 6.439 5 5 6.439-6.439 5.75 5.75-0.707 0.707c-0.583 0.583-0.583 1.538 0 2.121l9.423 9.423c0.583 0.583 1.538 0.583 2.121 0l3.535-3.535c0.583-0.583 0.583-1.538 0-2.121z&#8221;<span style=\"color: #339966;\">&gt;&lt;\/path&gt;<\/span><span style=\"color: #339966;\">&lt;\/g&gt;&lt;\/defs&gt;&lt;\/svg&gt;<\/span><\/p>\n<ul>\n<li><strong>Seconda parte &gt;<\/strong>\u00a0 Il prossimo passo \u00e8 quello di definire le classi e le propriet\u00e0 <strong>CSS<\/strong>, possiamo inserire questo codice in un file <em>css<\/em> collegato al nostro <em>html<\/em>:<\/li>\n<\/ul>\n<p class=\"code-cit\"><span style=\"color: #99ccff;\">.icon<\/span> {<br \/>\n<span style=\"color: #ff6600;\">display<\/span>: inline-block;<br \/>\n<span style=\"color: #ff6600;\">vertical-align<\/span>: text-top;<br \/>\n<span style=\"color: #ff6600;\">padding-right<\/span>: .3em;<br \/>\n<span style=\"color: #ff6600;\">fill<\/span>: #000000;<br \/>\n}<br \/>\n<span style=\"color: #99ccff;\">.icon<\/span>{ <span style=\"color: #ff6600;\">width<\/span>: 32px; <span style=\"color: #ff6600;\">height<\/span>: 32px; }<\/p>\n<p class=\"code-cit\"><span style=\"color: #99ccff;\">.icon-design<\/span>{ <span style=\"color: #ff6600;\">fill<\/span>: #000000; }<\/p>\n<ul>\n<li><strong>Terza parte &gt;<\/strong> Adesso per inserire l&#8217;icona nel punto desiderato sar\u00e0 sufficiente richiamare l&#8217;<span style=\"color: #ff6600;\">id<\/span> &#8220;<span style=\"color: #0000ff;\">icon-design<\/span>&#8221; nella corrispondente riga del nostro file <em>html,\u00a0<\/em>attraverso questa sintassi:<\/li>\n<\/ul>\n<p class=\"code-cit\"><span style=\"color: #339966;\">&lt;svg<\/span> <span style=\"color: #ff6600;\">class<\/span>=&#8221;<span style=\"color: #99ccff;\">icon icon-design<\/span>&#8221; <span style=\"color: #ff6600;\">viewBox<\/span>=&#8221;0 0 32 32&#8243;<span style=\"color: #339966;\">&gt;&lt;use<\/span> <span style=\"color: #ff6600;\">xlink:href<\/span>=&#8221;<span style=\"color: #99ccff;\">#icon-design<\/span>&#8220;<span style=\"color: #339966;\">&gt;&lt;\/use&gt;&lt;\/svg&gt;<\/span><\/p>\n<p>In questo modo, in corrispondenza di questa stringa faremo apparire l&#8217;immagine costruita precedentemente. Questa procedura ha il vantaggio di non caricare il proprio sito con file da importare e di permetterci di descrivere le immagini vettoriali direttamente dalla pagina <em>html<\/em>\u00a0e richiamarle ogni volta che serve grazie al <em>tag<\/em> <span style=\"color: #339966;\">&lt;use&gt;<\/span>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Considerazioni_e_commenti\"><\/span>Considerazioni e commenti<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Con questa tecnica possiamo descrivere un&#8217;immagine vettoriale utilizzando semplicemente poche righe di codice e senza caricare sul server file o aggiungere link a server esterni. Una procedura utile ma di cui \u00e8 opportuno non abusare. Come suggerisce <a href=\"http:\/\/www.sushidesignstudio.com\/about-me\/\">Marco Natolli<\/a>, graphic desiger, web designer e founder di <a href=\"http:\/\/www.sushidesignstudio.com\">Sushi Design Studio <\/a>bisogna stare attenti a come facciamo uso questa opzione:<\/p>\n<blockquote><p>Se il file <strong>SVG<\/strong> \u00e8 troppo complesso, rischi che rallenti le pagine dinamiche, perch\u00e9 non viene compresso e salvato in <em>cache<\/em>. In quel caso conviene tenerlo separato e &#8220;chiamarlo&#8221; con un normale <span style=\"color: #339966;\">&lt;img src&gt;<\/span>[&#8230;]\u00a0Poi fai attenzione perch\u00e9 <strong>W3C<\/strong> <strong>validator<\/strong> non ama gli <strong>SVG<\/strong> creati con illustrator&#8230;<\/p><\/blockquote>\n<p>Inoltre, come tutte le classi <em>css<\/em> \u00e8 possibile:<\/p>\n<blockquote><p>&#8230;spostare le classi <em>css<\/em> di ogni <strong>SVG<\/strong> in un unico foglio <em>css<\/em>&#8230;<\/p><\/blockquote>\n<p>Sta a voi decidere se inserire le classi di ogni <strong>SVG<\/strong> in un foglio di stile dedicato o all&#8217;interno del <em>css<\/em> principale. Questo dipende molto da come siete abituati a lavorare. Ovviamente se avete altre considerazioni, suggerimenti o consigli su questo argomento potete lasciare un commento.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Conclusioni\"><\/span>Conclusioni<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Spero sia stato utile! Grazie a questo\u00a0<em>trick<\/em> possiamo utilizzare la grafica vettoriale per inserire immagini sempre perfette o creare le icone dei nostri men\u00f9. Nel <a href=\"https:\/\/www.robertomaiolino.it\/blografik\/2017\/11\/23\/un-tool-per-icone-svg\/\">prossimo articolo<\/a> vedremo come estrarre le &#8220;coordinate&#8221; per le <em><span style=\"color: #339966;\">path<\/span><\/em> delle immagini grazie ad alcuni software e scopriremo link che mettono a disposizione librerie di immagini e icone utilissime.<\/p>\n<p><span style=\"border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; text-indent: 20px; width: auto; padding: 0px 4px 0px 0px; text-align: center; font-style: normal; font-variant-caps: normal; font-weight: bold; font-stretch: normal; font-size: 11px; line-height: 20px; font-family: 'Helvetica Neue', Helvetica, sans-serif; color: #ffffff; background-image: url(data:image\/svg+xml; base64,phn2zyb4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmciighlawdodd0imzbwecigd2lkdgg9ijmwchgiihzpzxdcb3g9ii0xic0xidmxidmxij48zz48cgf0acbkpsjnmjkundq5lde0ljy2mibdmjkundq5ldiyljcymiaymi44njgsmjkumju2ide0ljc1ldi5lji1nibdni42mzismjkumju2idaumduxldiyljcymiawlja1mswxnc42njigqzaumduxldyunjaxidyunjmyldaumdy3ide0ljc1ldaumdy3iemymi44njgsmc4wnjcgmjkundq5ldyunjaxidi5ljq0oswxnc42njiiigzpbgw9iinmzmyiihn0cm9rzt0ii2zmziigc3ryb2tllxdpzhropsixij48l3bhdgg+phbhdgggzd0itte0ljczmywxljy4nibdny41mtysms42odygms42njusny40otugms42njusmtqunjyyiemxljy2nswymc4xntkgns4xmdksmjquodu0idkuotcsmjyunzq0iem5ljg1niwyns43mtggos43ntmsmjqumtqzidewljaxniwymy4wmjigqzewlji1mywymi4wmsaxms41ndgsmtyuntcyidexlju0ocwxni41nzigqzexlju0ocwxni41nzigmteumtu3lde1ljc5nsaxms4xntcsmtqunjq2iemxms4xntcsmtiuodqyideyljixmswxms40otugmtmuntiyldexljq5nsbdmtqunjm3ldexljq5nsaxns4xnzusmtiumzi2ide1lje3nswxmy4zmjmgqze1lje3nswxnc40mzygmtqundyylde2ljegmtqumdkzlde3ljy0mybdmtmunzg1lde4ljkznsaxnc43ndusmtkuotg4ide2ljayocwxos45odggqze4ljm1mswxos45odggmjaumtm2lde3lju1niaymc4xmzysmtqumdq2iemymc4xmzysmtauotm5ide3ljg4ocw4ljc2nyaxnc42nzgsoc43njcgqzewljk1osw4ljc2nya4ljc3nywxms41mzygoc43nzcsmtqumzk4iem4ljc3nywxns41mtmgos4ymswxni43mdkgos43ndksmtcumzu5iem5ljg1niwxny40odggos44nzismtcunia5ljg0lde3ljczmsbdos43ndesmtgumtqxidkuntismtkumdizidkundc3lde5ljiwmybdos40miwxos40nca5lji4ocwxos40otegos4wncwxos4znzygqzcunda4lde4ljyymia2ljm4nywxni4yntigni4zodcsmtqumzq5iem2ljm4nywxmc4yntygos4zodmsni40otcgmtuumdiyldyundk3iemxos41ntusni40otcgmjmumdc4ldkunza1idizlja3ocwxmy45otegqzizlja3ocwxoc40njmgmjaumjm5ldiylja2miaxni4yotcsmjiumdyyiemxnc45nzmsmjiumdyyidezljcyocwyms4znzkgmtmumzayldiwlju3mibdmtmumzayldiwlju3miaxmi42ndcsmjmumdugmtiundg4ldizljy1nybdmtiumtkzldi0ljc4ncaxms4zotysmjyumtk2idewljg2mywyny4wntggqzeylja4niwyny40mzqgmtmumzg2ldi3ljyznyaxnc43mzmsmjcunjm3iemyms45nswyny42mzcgmjcuodaxldixljgyocayny44mdesmtqunjyyiemyny44mdesny40otugmjeuotusms42odygmtqunzmzldeunjg2iibmawxspsijymqwodfjij48l3bhdgg+pc9npjwvc3znpg==); background-size: 14px 14px; background-color: #bd081c; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer; border: none; -webkit-font-smoothing: antialiased; top: 39px; left: 20px; background-position: 3px 50%; background-repeat: no-repeat no-repeat;\">Salva<\/span><span style=\"border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; text-indent: 20px; width: auto; padding: 0px 4px 0px 0px; text-align: center; font-style: normal; font-variant-caps: normal; font-weight: bold; font-stretch: normal; font-size: 11px; line-height: 20px; font-family: 'Helvetica Neue', Helvetica, sans-serif; color: #ffffff; background-image: url(data:image\/svg+xml; base64,phn2zyb4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmciighlawdodd0imzbwecigd2lkdgg9ijmwchgiihzpzxdcb3g9ii0xic0xidmxidmxij48zz48cgf0acbkpsjnmjkundq5lde0ljy2mibdmjkundq5ldiyljcymiaymi44njgsmjkumju2ide0ljc1ldi5lji1nibdni42mzismjkumju2idaumduxldiyljcymiawlja1mswxnc42njigqzaumduxldyunjaxidyunjmyldaumdy3ide0ljc1ldaumdy3iemymi44njgsmc4wnjcgmjkundq5ldyunjaxidi5ljq0oswxnc42njiiigzpbgw9iinmzmyiihn0cm9rzt0ii2zmziigc3ryb2tllxdpzhropsixij48l3bhdgg+phbhdgggzd0itte0ljczmywxljy4nibdny41mtysms42odygms42njusny40otugms42njusmtqunjyyiemxljy2nswymc4xntkgns4xmdksmjquodu0idkuotcsmjyunzq0iem5ljg1niwyns43mtggos43ntmsmjqumtqzidewljaxniwymy4wmjigqzewlji1mywymi4wmsaxms41ndgsmtyuntcyidexlju0ocwxni41nzigqzexlju0ocwxni41nzigmteumtu3lde1ljc5nsaxms4xntcsmtqunjq2iemxms4xntcsmtiuodqyideyljixmswxms40otugmtmuntiyldexljq5nsbdmtqunjm3ldexljq5nsaxns4xnzusmtiumzi2ide1lje3nswxmy4zmjmgqze1lje3nswxnc40mzygmtqundyylde2ljegmtqumdkzlde3ljy0mybdmtmunzg1lde4ljkznsaxnc43ndusmtkuotg4ide2ljayocwxos45odggqze4ljm1mswxos45odggmjaumtm2lde3lju1niaymc4xmzysmtqumdq2iemymc4xmzysmtauotm5ide3ljg4ocw4ljc2nyaxnc42nzgsoc43njcgqzewljk1osw4ljc2nya4ljc3nywxms41mzygoc43nzcsmtqumzk4iem4ljc3nywxns41mtmgos4ymswxni43mdkgos43ndksmtcumzu5iem5ljg1niwxny40odggos44nzismtcunia5ljg0lde3ljczmsbdos43ndesmtgumtqxidkuntismtkumdizidkundc3lde5ljiwmybdos40miwxos40nca5lji4ocwxos40otegos4wncwxos4znzygqzcunda4lde4ljyymia2ljm4nywxni4yntigni4zodcsmtqumzq5iem2ljm4nywxmc4yntygos4zodmsni40otcgmtuumdiyldyundk3iemxos41ntusni40otcgmjmumdc4ldkunza1idizlja3ocwxmy45otegqzizlja3ocwxoc40njmgmjaumjm5ldiylja2miaxni4yotcsmjiumdyyiemxnc45nzmsmjiumdyyidezljcyocwyms4znzkgmtmumzayldiwlju3mibdmtmumzayldiwlju3miaxmi42ndcsmjmumdugmtiundg4ldizljy1nybdmtiumtkzldi0ljc4ncaxms4zotysmjyumtk2idewljg2mywyny4wntggqzeylja4niwyny40mzqgmtmumzg2ldi3ljyznyaxnc43mzmsmjcunjm3iemyms45nswyny42mzcgmjcuodaxldixljgyocayny44mdesmtqunjyyiemyny44mdesny40otugmjeuotusms42odygmtqunzmzldeunjg2iibmawxspsijymqwodfjij48l3bhdgg+pc9npjwvc3znpg==); background-size: 14px 14px; background-color: #bd081c; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer; border: none; -webkit-font-smoothing: antialiased; top: 39px; left: 20px; background-position: 3px 50%; background-repeat: no-repeat no-repeat;\">Salva<\/span><\/p>\n<p><span style=\"border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; text-indent: 20px; width: auto; padding: 0px 4px 0px 0px; text-align: center; font-style: normal; font-variant-caps: normal; font-weight: bold; font-stretch: normal; font-size: 11px; line-height: 20px; font-family: 'Helvetica Neue', Helvetica, sans-serif; color: #ffffff; background-image: url(data:image\/svg+xml; base64,phn2zyb4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmciighlawdodd0imzbwecigd2lkdgg9ijmwchgiihzpzxdcb3g9ii0xic0xidmxidmxij48zz48cgf0acbkpsjnmjkundq5lde0ljy2mibdmjkundq5ldiyljcymiaymi44njgsmjkumju2ide0ljc1ldi5lji1nibdni42mzismjkumju2idaumduxldiyljcymiawlja1mswxnc42njigqzaumduxldyunjaxidyunjmyldaumdy3ide0ljc1ldaumdy3iemymi44njgsmc4wnjcgmjkundq5ldyunjaxidi5ljq0oswxnc42njiiigzpbgw9iinmzmyiihn0cm9rzt0ii2zmziigc3ryb2tllxdpzhropsixij48l3bhdgg+phbhdgggzd0itte0ljczmywxljy4nibdny41mtysms42odygms42njusny40otugms42njusmtqunjyyiemxljy2nswymc4xntkgns4xmdksmjquodu0idkuotcsmjyunzq0iem5ljg1niwyns43mtggos43ntmsmjqumtqzidewljaxniwymy4wmjigqzewlji1mywymi4wmsaxms41ndgsmtyuntcyidexlju0ocwxni41nzigqzexlju0ocwxni41nzigmteumtu3lde1ljc5nsaxms4xntcsmtqunjq2iemxms4xntcsmtiuodqyideyljixmswxms40otugmtmuntiyldexljq5nsbdmtqunjm3ldexljq5nsaxns4xnzusmtiumzi2ide1lje3nswxmy4zmjmgqze1lje3nswxnc40mzygmtqundyylde2ljegmtqumdkzlde3ljy0mybdmtmunzg1lde4ljkznsaxnc43ndusmtkuotg4ide2ljayocwxos45odggqze4ljm1mswxos45odggmjaumtm2lde3lju1niaymc4xmzysmtqumdq2iemymc4xmzysmtauotm5ide3ljg4ocw4ljc2nyaxnc42nzgsoc43njcgqzewljk1osw4ljc2nya4ljc3nywxms41mzygoc43nzcsmtqumzk4iem4ljc3nywxns41mtmgos4ymswxni43mdkgos43ndksmtcumzu5iem5ljg1niwxny40odggos44nzismtcunia5ljg0lde3ljczmsbdos43ndesmtgumtqxidkuntismtkumdizidkundc3lde5ljiwmybdos40miwxos40nca5lji4ocwxos40otegos4wncwxos4znzygqzcunda4lde4ljyymia2ljm4nywxni4yntigni4zodcsmtqumzq5iem2ljm4nywxmc4yntygos4zodmsni40otcgmtuumdiyldyundk3iemxos41ntusni40otcgmjmumdc4ldkunza1idizlja3ocwxmy45otegqzizlja3ocwxoc40njmgmjaumjm5ldiylja2miaxni4yotcsmjiumdyyiemxnc45nzmsmjiumdyyidezljcyocwyms4znzkgmtmumzayldiwlju3mibdmtmumzayldiwlju3miaxmi42ndcsmjmumdugmtiundg4ldizljy1nybdmtiumtkzldi0ljc4ncaxms4zotysmjyumtk2idewljg2mywyny4wntggqzeylja4niwyny40mzqgmtmumzg2ldi3ljyznyaxnc43mzmsmjcunjm3iemyms45nswyny42mzcgmjcuodaxldixljgyocayny44mdesmtqunjyyiemyny44mdesny40otugmjeuotusms42odygmtqunzmzldeunjg2iibmawxspsijymqwodfjij48l3bhdgg+pc9npjwvc3znpg==); background-size: 14px 14px; background-color: #bd081c; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer; border: none; -webkit-font-smoothing: antialiased; background-position: 3px 50%; background-repeat: no-repeat no-repeat;\">Salva<\/span><span style=\"border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; text-indent: 20px; width: auto; padding: 0px 4px 0px 0px; text-align: center; font-style: normal; font-variant-caps: normal; font-weight: bold; font-stretch: normal; font-size: 11px; line-height: 20px; font-family: 'Helvetica Neue', Helvetica, sans-serif; color: #ffffff; background-image: url(data:image\/svg+xml; base64,phn2zyb4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmciighlawdodd0imzbwecigd2lkdgg9ijmwchgiihzpzxdcb3g9ii0xic0xidmxidmxij48zz48cgf0acbkpsjnmjkundq5lde0ljy2mibdmjkundq5ldiyljcymiaymi44njgsmjkumju2ide0ljc1ldi5lji1nibdni42mzismjkumju2idaumduxldiyljcymiawlja1mswxnc42njigqzaumduxldyunjaxidyunjmyldaumdy3ide0ljc1ldaumdy3iemymi44njgsmc4wnjcgmjkundq5ldyunjaxidi5ljq0oswxnc42njiiigzpbgw9iinmzmyiihn0cm9rzt0ii2zmziigc3ryb2tllxdpzhropsixij48l3bhdgg+phbhdgggzd0itte0ljczmywxljy4nibdny41mtysms42odygms42njusny40otugms42njusmtqunjyyiemxljy2nswymc4xntkgns4xmdksmjquodu0idkuotcsmjyunzq0iem5ljg1niwyns43mtggos43ntmsmjqumtqzidewljaxniwymy4wmjigqzewlji1mywymi4wmsaxms41ndgsmtyuntcyidexlju0ocwxni41nzigqzexlju0ocwxni41nzigmteumtu3lde1ljc5nsaxms4xntcsmtqunjq2iemxms4xntcsmtiuodqyideyljixmswxms40otugmtmuntiyldexljq5nsbdmtqunjm3ldexljq5nsaxns4xnzusmtiumzi2ide1lje3nswxmy4zmjmgqze1lje3nswxnc40mzygmtqundyylde2ljegmtqumdkzlde3ljy0mybdmtmunzg1lde4ljkznsaxnc43ndusmtkuotg4ide2ljayocwxos45odggqze4ljm1mswxos45odggmjaumtm2lde3lju1niaymc4xmzysmtqumdq2iemymc4xmzysmtauotm5ide3ljg4ocw4ljc2nyaxnc42nzgsoc43njcgqzewljk1osw4ljc2nya4ljc3nywxms41mzygoc43nzcsmtqumzk4iem4ljc3nywxns41mtmgos4ymswxni43mdkgos43ndksmtcumzu5iem5ljg1niwxny40odggos44nzismtcunia5ljg0lde3ljczmsbdos43ndesmtgumtqxidkuntismtkumdizidkundc3lde5ljiwmybdos40miwxos40nca5lji4ocwxos40otegos4wncwxos4znzygqzcunda4lde4ljyymia2ljm4nywxni4yntigni4zodcsmtqumzq5iem2ljm4nywxmc4yntygos4zodmsni40otcgmtuumdiyldyundk3iemxos41ntusni40otcgmjmumdc4ldkunza1idizlja3ocwxmy45otegqzizlja3ocwxoc40njmgmjaumjm5ldiylja2miaxni4yotcsmjiumdyyiemxnc45nzmsmjiumdyyidezljcyocwyms4znzkgmtmumzayldiwlju3mibdmtmumzayldiwlju3miaxmi42ndcsmjmumdugmtiundg4ldizljy1nybdmtiumtkzldi0ljc4ncaxms4zotysmjyumtk2idewljg2mywyny4wntggqzeylja4niwyny40mzqgmtmumzg2ldi3ljyznyaxnc43mzmsmjcunjm3iemyms45nswyny42mzcgmjcuodaxldixljgyocayny44mdesmtqunjyyiemyny44mdesny40otugmjeuotusms42odygmtqunzmzldeunjg2iibmawxspsijymqwodfjij48l3bhdgg+pc9npjwvc3znpg==); background-size: 14px 14px; background-color: #bd081c; position: absolute; opacity: 1; z-index: 8675309; display: none; cursor: pointer; border: none; -webkit-font-smoothing: antialiased; background-position: 3px 50%; background-repeat: no-repeat no-repeat;\">Salva<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduzione Ecco un piccolo trick per avere immagini vettoriali perfette grazie all&#8217;Inline SVG. Dopo aver subito un declino per alcuni anni, l&#8217;SVG torna in gran voga grazie anche alle nuove\u00a0features\u00a0introdotte con l&#8217;HTML 5.5 e il CSS3.\u00a0Questo formato utilizzato spesso per realizzare icone per le pagine web, porta con se diversi vantaggi, al tal punto che [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":4590,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,14,9,12,61,2],"tags":[],"class_list":["post-830","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-graphicdesign","category-html_css","category-love_tools","category-user_experience","category-user_interface","category-webdesign"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Inline SVG: Immagini perfette per il web - BloGrafik<\/title>\n<meta name=\"description\" content=\"Ecco un piccolo trick per avere immagini vettoriali perfette grazie all&#039;Inline SVG. Dopo aver subito un declino per alcuni anni, l&#039;SVG torna in gran voga...\" \/>\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.robertomaiolino.it\/blografik\/2017\/11\/22\/inline-svg-per-il-web\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Inline SVG: Immagini perfette per il web - BloGrafik\" \/>\n<meta property=\"og:description\" content=\"Ecco un piccolo trick per avere immagini vettoriali perfette grazie all&#039;Inline SVG. Dopo aver subito un declino per alcuni anni, l&#039;SVG torna in gran voga...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.robertomaiolino.it\/blografik\/2017\/11\/22\/inline-svg-per-il-web\/\" \/>\n<meta property=\"og:site_name\" content=\"BloGrafik\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/robertomaiolinodesign\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-22T16:59:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-22T11:30:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2026\/05\/inline_svg.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Roberto Maiolino\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Roberto_RMD\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Roberto Maiolino\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2017\\\/11\\\/22\\\/inline-svg-per-il-web\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2017\\\/11\\\/22\\\/inline-svg-per-il-web\\\/\"},\"author\":{\"name\":\"Roberto Maiolino\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#\\\/schema\\\/person\\\/c71e1a677856d2fe685162286d1d3719\"},\"headline\":\"Inline SVG: Immagini perfette per il web\",\"datePublished\":\"2017-11-22T16:59:07+00:00\",\"dateModified\":\"2026-05-22T11:30:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2017\\\/11\\\/22\\\/inline-svg-per-il-web\\\/\"},\"wordCount\":1014,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2017\\\/11\\\/22\\\/inline-svg-per-il-web\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/inline_svg.png\",\"articleSection\":[\"Graphic Design\",\"HTML &amp; CSS\",\"Love &amp; Tools\",\"User Experience\",\"User Interface\",\"Web Design\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2017\\\/11\\\/22\\\/inline-svg-per-il-web\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2017\\\/11\\\/22\\\/inline-svg-per-il-web\\\/\",\"url\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2017\\\/11\\\/22\\\/inline-svg-per-il-web\\\/\",\"name\":\"Inline SVG: Immagini perfette per il web - BloGrafik\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2017\\\/11\\\/22\\\/inline-svg-per-il-web\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2017\\\/11\\\/22\\\/inline-svg-per-il-web\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/inline_svg.png\",\"datePublished\":\"2017-11-22T16:59:07+00:00\",\"dateModified\":\"2026-05-22T11:30:45+00:00\",\"description\":\"Ecco un piccolo trick per avere immagini vettoriali perfette grazie all'Inline SVG. Dopo aver subito un declino per alcuni anni, l'SVG torna in gran voga...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2017\\\/11\\\/22\\\/inline-svg-per-il-web\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2017\\\/11\\\/22\\\/inline-svg-per-il-web\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2017\\\/11\\\/22\\\/inline-svg-per-il-web\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/inline_svg.png\",\"contentUrl\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/inline_svg.png\",\"width\":1500,\"height\":750,\"caption\":\"Illustrazione di un browser con codice\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/2017\\\/11\\\/22\\\/inline-svg-per-il-web\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Inline SVG: Immagini perfette per il web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#website\",\"url\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/\",\"name\":\"BloGrafik\",\"description\":\"Il blog di Roberto Maiolino\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#organization\",\"name\":\"BloGrafik\",\"url\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Testata_blografik@2x.png\",\"contentUrl\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/Testata_blografik@2x.png\",\"width\":1265,\"height\":196,\"caption\":\"BloGrafik\"},\"image\":{\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/#\\\/schema\\\/person\\\/c71e1a677856d2fe685162286d1d3719\",\"name\":\"Roberto Maiolino\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c2d13d031a1d0ee5599d37de69ee0bb10f7319da969b4ad13a6ec0b796fde8f2?s=96&d=initials&r=g&initials=ro\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c2d13d031a1d0ee5599d37de69ee0bb10f7319da969b4ad13a6ec0b796fde8f2?s=96&d=initials&r=g&initials=ro\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c2d13d031a1d0ee5599d37de69ee0bb10f7319da969b4ad13a6ec0b796fde8f2?s=96&d=initials&r=g&initials=ro\",\"caption\":\"Roberto Maiolino\"},\"description\":\"Formazione professionale da graphic designer, lavoro nel settore nel marketing tradizionale e digitale. Una figura unica per la grafica, la comunicazione e l\u2019advertising. Da anni lavoro per le aziende sul territorio nazionale e per le agenzie di comunicazione del Trentino-Alto Adige. www.robertomaiolino.it\",\"sameAs\":[\"https:\\\/\\\/www.robertomaiolino.it\",\"https:\\\/\\\/www.facebook.com\\\/robertomaiolinodesign\\\/\",\"www.linkedin.com\\\/in\\\/roberto-maiolino-81a209a5\",\"https:\\\/\\\/x.com\\\/Roberto_RMD\"],\"url\":\"https:\\\/\\\/www.robertomaiolino.it\\\/blografik\\\/author\\\/roberto-maiolino\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Inline SVG: Immagini perfette per il web - BloGrafik","description":"Ecco un piccolo trick per avere immagini vettoriali perfette grazie all'Inline SVG. Dopo aver subito un declino per alcuni anni, l'SVG torna in gran voga...","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.robertomaiolino.it\/blografik\/2017\/11\/22\/inline-svg-per-il-web\/","og_locale":"it_IT","og_type":"article","og_title":"Inline SVG: Immagini perfette per il web - BloGrafik","og_description":"Ecco un piccolo trick per avere immagini vettoriali perfette grazie all'Inline SVG. Dopo aver subito un declino per alcuni anni, l'SVG torna in gran voga...","og_url":"https:\/\/www.robertomaiolino.it\/blografik\/2017\/11\/22\/inline-svg-per-il-web\/","og_site_name":"BloGrafik","article_author":"https:\/\/www.facebook.com\/robertomaiolinodesign\/","article_published_time":"2017-11-22T16:59:07+00:00","article_modified_time":"2026-05-22T11:30:45+00:00","og_image":[{"width":1500,"height":750,"url":"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2026\/05\/inline_svg.png","type":"image\/png"}],"author":"Roberto Maiolino","twitter_card":"summary_large_image","twitter_creator":"@Roberto_RMD","twitter_misc":{"Scritto da":"Roberto Maiolino","Tempo di lettura stimato":"6 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.robertomaiolino.it\/blografik\/2017\/11\/22\/inline-svg-per-il-web\/#article","isPartOf":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/2017\/11\/22\/inline-svg-per-il-web\/"},"author":{"name":"Roberto Maiolino","@id":"https:\/\/www.robertomaiolino.it\/blografik\/#\/schema\/person\/c71e1a677856d2fe685162286d1d3719"},"headline":"Inline SVG: Immagini perfette per il web","datePublished":"2017-11-22T16:59:07+00:00","dateModified":"2026-05-22T11:30:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/2017\/11\/22\/inline-svg-per-il-web\/"},"wordCount":1014,"commentCount":1,"publisher":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/#organization"},"image":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/2017\/11\/22\/inline-svg-per-il-web\/#primaryimage"},"thumbnailUrl":"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2026\/05\/inline_svg.png","articleSection":["Graphic Design","HTML &amp; CSS","Love &amp; Tools","User Experience","User Interface","Web Design"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.robertomaiolino.it\/blografik\/2017\/11\/22\/inline-svg-per-il-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.robertomaiolino.it\/blografik\/2017\/11\/22\/inline-svg-per-il-web\/","url":"https:\/\/www.robertomaiolino.it\/blografik\/2017\/11\/22\/inline-svg-per-il-web\/","name":"Inline SVG: Immagini perfette per il web - BloGrafik","isPartOf":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/2017\/11\/22\/inline-svg-per-il-web\/#primaryimage"},"image":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/2017\/11\/22\/inline-svg-per-il-web\/#primaryimage"},"thumbnailUrl":"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2026\/05\/inline_svg.png","datePublished":"2017-11-22T16:59:07+00:00","dateModified":"2026-05-22T11:30:45+00:00","description":"Ecco un piccolo trick per avere immagini vettoriali perfette grazie all'Inline SVG. Dopo aver subito un declino per alcuni anni, l'SVG torna in gran voga...","breadcrumb":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/2017\/11\/22\/inline-svg-per-il-web\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.robertomaiolino.it\/blografik\/2017\/11\/22\/inline-svg-per-il-web\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.robertomaiolino.it\/blografik\/2017\/11\/22\/inline-svg-per-il-web\/#primaryimage","url":"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2026\/05\/inline_svg.png","contentUrl":"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2026\/05\/inline_svg.png","width":1500,"height":750,"caption":"Illustrazione di un browser con codice"},{"@type":"BreadcrumbList","@id":"https:\/\/www.robertomaiolino.it\/blografik\/2017\/11\/22\/inline-svg-per-il-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.robertomaiolino.it\/blografik\/"},{"@type":"ListItem","position":2,"name":"Inline SVG: Immagini perfette per il web"}]},{"@type":"WebSite","@id":"https:\/\/www.robertomaiolino.it\/blografik\/#website","url":"https:\/\/www.robertomaiolino.it\/blografik\/","name":"BloGrafik","description":"Il blog di Roberto Maiolino","publisher":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.robertomaiolino.it\/blografik\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/www.robertomaiolino.it\/blografik\/#organization","name":"BloGrafik","url":"https:\/\/www.robertomaiolino.it\/blografik\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.robertomaiolino.it\/blografik\/#\/schema\/logo\/image\/","url":"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2026\/05\/Testata_blografik@2x.png","contentUrl":"https:\/\/www.robertomaiolino.it\/blografik\/wp-content\/uploads\/2026\/05\/Testata_blografik@2x.png","width":1265,"height":196,"caption":"BloGrafik"},"image":{"@id":"https:\/\/www.robertomaiolino.it\/blografik\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.robertomaiolino.it\/blografik\/#\/schema\/person\/c71e1a677856d2fe685162286d1d3719","name":"Roberto Maiolino","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/c2d13d031a1d0ee5599d37de69ee0bb10f7319da969b4ad13a6ec0b796fde8f2?s=96&d=initials&r=g&initials=ro","url":"https:\/\/secure.gravatar.com\/avatar\/c2d13d031a1d0ee5599d37de69ee0bb10f7319da969b4ad13a6ec0b796fde8f2?s=96&d=initials&r=g&initials=ro","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c2d13d031a1d0ee5599d37de69ee0bb10f7319da969b4ad13a6ec0b796fde8f2?s=96&d=initials&r=g&initials=ro","caption":"Roberto Maiolino"},"description":"Formazione professionale da graphic designer, lavoro nel settore nel marketing tradizionale e digitale. Una figura unica per la grafica, la comunicazione e l\u2019advertising. Da anni lavoro per le aziende sul territorio nazionale e per le agenzie di comunicazione del Trentino-Alto Adige. www.robertomaiolino.it","sameAs":["https:\/\/www.robertomaiolino.it","https:\/\/www.facebook.com\/robertomaiolinodesign\/","www.linkedin.com\/in\/roberto-maiolino-81a209a5","https:\/\/x.com\/Roberto_RMD"],"url":"https:\/\/www.robertomaiolino.it\/blografik\/author\/roberto-maiolino\/"}]}},"_links":{"self":[{"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/posts\/830","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/comments?post=830"}],"version-history":[{"count":32,"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/posts\/830\/revisions"}],"predecessor-version":[{"id":883,"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/posts\/830\/revisions\/883"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/media\/4590"}],"wp:attachment":[{"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/media?parent=830"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/categories?post=830"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.robertomaiolino.it\/blografik\/wp-json\/wp\/v2\/tags?post=830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}