{"id":15323,"date":"2013-07-16T10:21:32","date_gmt":"2013-07-16T08:21:32","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=15323"},"modified":"2023-02-27T14:40:38","modified_gmt":"2023-02-27T14:40:38","slug":"web-vettoriale-svg-e-icon-fonts","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/marketing\/web-vettoriale-svg-e-icon-fonts\/","title":{"rendered":"Il web in vettoriale: le immagini svg e gli icon fonts"},"content":{"rendered":"<p>Nella <em>to do list<\/em> di web designer e developer dei tempi moderni ci dovrebbe sempre essere un elemento in lista da spuntare: <strong>scalabilit\u00e0 delle immagini<\/strong> e grafiche per qualsiasi dispositivo. Che sia quindi uno smartphone di basso costo o un MacBook con un display retina, il nostro sito dovrebbe sempre fare la sua bella figura, presentando i contenuti nel miglior modo possibile.<\/p>\n<p>Esistono diverse soluzioni e strumenti che possiamo adottare per arricchire il nostro sito di immagini che rispondano a questa esigenza, sempre mantenendo il loro livello di dettaglio. Oggi vorrei parlarvi di due in particolare: <strong>immagini svg<\/strong> e <strong>icon fonts<\/strong>.<\/p>\n<h2>Cosa sono le immagini svg e gli icon fonts?<\/h2>\n<p>In poche parole, <strong>SVG e icon fonts<\/strong> sono delle immagini vettoriali che possiamo utilizzare all\u2019interno della nostra pagina web. Le immagini svg sono uno standard della specifica W3C basati su file XML che ne descrivono la struttura, i secondi sono web fonts che contengono un simbolo al posto di un carattere tipografico. Come si pu\u00f2 quindi intuire da ci\u00f2 di cui sono costituiti, rappresentano entrambi dei contenuti molto pi\u00f9 leggeri rispetto alle immagini classiche con formato .jpg e .png, permettendoci di occupare meno banda. In aggiunta, possono essere scalati a qualsiasi dimensione senza perdere qualit\u00e0 dando il meglio di s\u00e9 su display retina.<\/p>\n<h2>L&#8217;utilizzo delle immagini svg e la compatibilit\u00e0<\/h2>\n<p>Immagini svg possono essere utilizzate esattamente nel modo in cui includiamo JPG e PNG, sia con il tag img:<\/p>\n<p>[code type=&#8221;markup&#8221;][\/code]<\/p>\n<p>sia utilizzandole come sfondo di un elemento:<\/p>\n<p>[code type=&#8221;markup&#8221;]<\/p>\n<div class=\"\u201dragno-artera\u201d\"><\/div>\n<p>[\/code]<br \/>\n[code type=&#8221;css&#8221;]<br \/>\n.ragno-artera {<br \/>\nwidth: 600px;<br \/>\nheight: 600px;<br \/>\nbackground: url(&#8220;https:\/\/www.artera.net\/wp-content\/uploads\/immagini-esempio\/ragno.svg&#8221;) no-repeat;<br \/>\nbackground-size: cover;<br \/>\n}<br \/>\n[\/code]<\/p>\n<p>Con le propriet\u00e0 dell\u2019immagine o con il CSS possiamo specificarne le dimensioni. Come potete vedere da <a href=\"http:\/\/jsfiddle.net\/emilymeroni\/rA4V5\/\" target=\"_blank\" rel=\"noopener noreferrer\">questo link<\/a> riusciamo ad avere un risultato estremamente soddisfacente di immagine ingrandita.<\/p>\n<p>Un modo alternativo \u00e8 quello di includere il <strong>codice XML<\/strong> generato: \u00e8 sufficiente aprire l\u2019immagine svg in un file di testo e copiarne il codice nella nostra pagina.<\/p>\n<p>Per la creazione di immagini in questo formato, possiamo utilizzare <strong>Adobe Illustrator<\/strong> o in alternativa il programma open souce <a href=\"http:\/\/inkscape.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Inkscape<\/a> (compatibile con Windows, Mac e Linux).<\/p>\n<p>Il <strong>formato SVG<\/strong> \u00e8 supportato dalla maggior parte di Browser e sistemi operativi per smartphone, eccetto per IE &lt; 8 e vecchie versioni di Android.<\/p>\n<p>Se vogliamo rendere un svg incluso in un tag img possiamo utilizzare Modernizr grazie al quale possiamo inserire un fallback .png o .jpg<br \/>\n[code type=&#8221;javascript&#8221;]<br \/>\nif (!Modernizr.svg) {<br \/>\n$(&#8220;.ragno-artera&#8221;).attr(&#8220;src&#8221;, &#8220;images\/ragno-artera.png&#8221;);<br \/>\n}<br \/>\n[\/code]<br \/>\nPer gli sfondi, possiamo sfruttare la classe aggiunta nel codice da Modernizr \u201cno-svg\u201d :<\/p>\n<p>[code type=&#8221;css&#8221;].ragno-artera{<br \/>\nbackground: url(&#8220;https:\/\/www.artera.net\/wp-content\/uploads\/immagini-esempio\/ragno.svg&#8221;) no-repeat;<br \/>\n}<br \/>\n.no-svg .ragno-artera{<br \/>\nbackground-image: url(&#8220;https:\/\/www.artera.net\/wp-content\/uploads\/immagini-esempio\/ragno.png&#8221;);<br \/>\n[\/code]<br \/>\nAnche nel caso in cui abbiamo utilizzato direttamente il codice XML generato, sfruttiamo ancora una volta la classe CSS \u201cno-svg\u201d, inserendo nel codice html un tag che conterr\u00e0 la nostra immagine di fallback:<\/p>\n<p>[code type=&#8221;markup&#8221;]<svg>&#8230;<\/svg><\/p>\n<div class=\"\u201dfallback-ragno-artera\u201d\"><\/div>\n<p>[\/code]<br \/>\n[code type=&#8221;css&#8221;].fallback-ragno-artera{<br \/>\ndisplay: none;<br \/>\n}<\/p>\n<p>.no-svg fallback-ragno-artera{<br \/>\ndisplay: block;<br \/>\nbackground-image: url(&#8220;https:\/\/www.artera.net\/wp-content\/uploads\/immagini-esempio\/ragno.png&#8221;);<br \/>\n}[\/code]<\/p>\n<p>Vi consiglio di leggere l\u2019articolo di Chris Coyier per ulteriori approfondimenti.<\/p>\n<h2>L&#8217;utilizzo degli icon font e la compatibilit\u00e0<\/h2>\n<p>Per utilizzare gli <strong>icon font<\/strong> esistono diverse web app che vengono in nostro aiuto, come <a href=\"http:\/\/icomoon.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Icomoon<\/a>. Su quest\u2019ultimo troviamo numerose icone gratuite, tra cui facebook, twitter e google+, con i css e i file necessari da includere pronti all\u2019uso. Possiamo anche caricare delle nostre icone liberamente, con risultati migliori se in font o svg.<\/p>\n<p>Per utilizzarle all\u2019interno del nostro sito, includiamo lo style.css per la regola @font-face e i font generati dalla cartella fonts. Possiamo ora decidere se utilizzare i data-attributes per inserire le icone nel markup:<br \/>\n[code type=&#8221;markup&#8221;]<br \/>\n<a href=\"#\" data-icon=\"?\">Serve aiuto?<\/a><br \/>\n[\/code]<\/p>\n<p>Specificando agli screen reader con il <a href=\"https:\/\/www.artera.net\/it\/blog\/access\/siti-accessibili-wai-aria-1\">tag aria<\/a> che il data-attribute non dovr\u00e0 essere letto.<\/p>\n<p>In alternativa, possiamo utilizzare le classi messe a disposizione dal css:<br \/>\n[code type=&#8221;markup&#8221;]<br \/>\n<span class=\"\u201dquestion-mark\u201d\">Maggiori informazioni<\/span><br \/>\n[\/code]<br \/>\nSu questi elementi possiamo applicare tutte le propriet\u00e0 css dei font, come il colore, la dimensione, l\u2019ombra. Il servizio gratuito permette solo icone monocromatiche e senza gradienti.<\/p>\n<p>Per quanto riguarda la compatibilit\u00e0, il package scaricato contiene un file javascript per avere la <strong>compatibilit\u00e0 multibrowser<\/strong>.<\/p>\n<p>Vi lascio con il <a href=\"http:\/\/icomoon.io\/#docs\" target=\"_blank\" rel=\"noopener noreferrer\">link alla documentazione completa<\/a> di Icomoon.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web designer e developer dovrebbero sempre pensare alla scalabilit\u00e0 delle immagini, per questo, oggi voglio parlarvi di <strong>immagini svg<\/strong> e <strong>icon fonts<\/strong>, soluzioni che si possono adottare per arricchire un sito di immagini che mantengano il loro livello di dettaglio.<\/p>\n","protected":false},"author":4,"featured_media":15324,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[300],"tags":[68,115,133,213],"class_list":["post-15323","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing","tag-font","tag-grafica-vettoriale","tag-icone","tag-svg"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Immagini SVG e icon fonts, per un web vettoriale - blog.artera.net<\/title>\n<meta name=\"description\" content=\"Parliamo di immagini svg e icon fonts per arricchire un sito di immagini scalabili che mantengano il loro livello di dettaglio.\" \/>\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.artera.net\/it\/marketing\/web-vettoriale-svg-e-icon-fonts\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Immagini SVG e icon fonts, per un web vettoriale - blog.artera.net\" \/>\n<meta property=\"og:description\" content=\"Parliamo di immagini svg e icon fonts per arricchire un sito di immagini scalabili che mantengano il loro livello di dettaglio.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.artera.net\/it\/marketing\/web-vettoriale-svg-e-icon-fonts\/\" \/>\n<meta property=\"og:site_name\" content=\"Artera\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/artera.net\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-07-16T08:21:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-27T14:40:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/07\/post-main.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1\" \/>\n\t<meta property=\"og:image:height\" content=\"1\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sergio Ravera\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sergio Ravera\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/web-vettoriale-svg-e-icon-fonts\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/web-vettoriale-svg-e-icon-fonts\\\/\"},\"author\":{\"name\":\"Sergio Ravera\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\"},\"headline\":\"Il web in vettoriale: le immagini svg e gli icon fonts\",\"datePublished\":\"2013-07-16T08:21:32+00:00\",\"dateModified\":\"2023-02-27T14:40:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/web-vettoriale-svg-e-icon-fonts\\\/\"},\"wordCount\":738,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/web-vettoriale-svg-e-icon-fonts\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/07\\\/post-main.jpg\",\"keywords\":[\"font\",\"grafica vettoriale\",\"icone\",\"SVG\"],\"articleSection\":[\"Marketing\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/web-vettoriale-svg-e-icon-fonts\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/web-vettoriale-svg-e-icon-fonts\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/web-vettoriale-svg-e-icon-fonts\\\/\",\"name\":\"Immagini SVG e icon fonts, per un web vettoriale - blog.artera.net\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/web-vettoriale-svg-e-icon-fonts\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/web-vettoriale-svg-e-icon-fonts\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/07\\\/post-main.jpg\",\"datePublished\":\"2013-07-16T08:21:32+00:00\",\"dateModified\":\"2023-02-27T14:40:38+00:00\",\"description\":\"Parliamo di immagini svg e icon fonts per arricchire un sito di immagini scalabili che mantengano il loro livello di dettaglio.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/web-vettoriale-svg-e-icon-fonts\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/web-vettoriale-svg-e-icon-fonts\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/web-vettoriale-svg-e-icon-fonts\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/07\\\/post-main.jpg\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/07\\\/post-main.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/web-vettoriale-svg-e-icon-fonts\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Il web in vettoriale: le immagini svg e gli icon fonts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\",\"name\":\"Artera\",\"description\":\"Swiss Premium Hosting\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.artera.net\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\",\"name\":\"Artera\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/artera-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/artera-logo.png\",\"width\":300,\"height\":77,\"caption\":\"Artera\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/artera.net\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/artera\\\/\",\"https:\\\/\\\/www.instagram.com\\\/artera_swiss\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\",\"name\":\"Sergio Ravera\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"caption\":\"Sergio Ravera\"},\"description\":\"Raised in a family tradition of merchants, my entrepreneurial spirit drove me to launch my first e-commerce venture in 1998. My vision and dedication led, in 2002, to the founding of Artera, now a leading brand in premium managed cloud hosting services. As Chief Executive Officer, I lead DHH Switzerland SA, part of the international DHH S.p.A. group, listed on the Milan Stock Exchange with the reference code (AIM \u2013 ISIN: IT0005203622). It is under this brand that the Artera brand continues to grow and thrive. In addition to my commitment to the business world, I am an active researcher in the field of new technologies, always fascinated by cutting-edge innovations in the industry.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/sergioravera\\\/\"],\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/author\\\/sergio-ravera\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Immagini SVG e icon fonts, per un web vettoriale - blog.artera.net","description":"Parliamo di immagini svg e icon fonts per arricchire un sito di immagini scalabili che mantengano il loro livello di dettaglio.","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.artera.net\/it\/marketing\/web-vettoriale-svg-e-icon-fonts\/","og_locale":"it_IT","og_type":"article","og_title":"Immagini SVG e icon fonts, per un web vettoriale - blog.artera.net","og_description":"Parliamo di immagini svg e icon fonts per arricchire un sito di immagini scalabili che mantengano il loro livello di dettaglio.","og_url":"https:\/\/www.artera.net\/it\/marketing\/web-vettoriale-svg-e-icon-fonts\/","og_site_name":"Artera","article_publisher":"https:\/\/www.facebook.com\/artera.net\/","article_published_time":"2013-07-16T08:21:32+00:00","article_modified_time":"2023-02-27T14:40:38+00:00","og_image":[{"url":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/07\/post-main.jpg","width":1,"height":1,"type":"image\/jpeg"}],"author":"Sergio Ravera","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Sergio Ravera","Tempo di lettura stimato":"4 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.artera.net\/it\/marketing\/web-vettoriale-svg-e-icon-fonts\/#article","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/marketing\/web-vettoriale-svg-e-icon-fonts\/"},"author":{"name":"Sergio Ravera","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0"},"headline":"Il web in vettoriale: le immagini svg e gli icon fonts","datePublished":"2013-07-16T08:21:32+00:00","dateModified":"2023-02-27T14:40:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.artera.net\/it\/marketing\/web-vettoriale-svg-e-icon-fonts\/"},"wordCount":738,"commentCount":2,"publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"image":{"@id":"https:\/\/www.artera.net\/it\/marketing\/web-vettoriale-svg-e-icon-fonts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/07\/post-main.jpg","keywords":["font","grafica vettoriale","icone","SVG"],"articleSection":["Marketing"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.artera.net\/it\/marketing\/web-vettoriale-svg-e-icon-fonts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.artera.net\/it\/marketing\/web-vettoriale-svg-e-icon-fonts\/","url":"https:\/\/www.artera.net\/it\/marketing\/web-vettoriale-svg-e-icon-fonts\/","name":"Immagini SVG e icon fonts, per un web vettoriale - blog.artera.net","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.artera.net\/it\/marketing\/web-vettoriale-svg-e-icon-fonts\/#primaryimage"},"image":{"@id":"https:\/\/www.artera.net\/it\/marketing\/web-vettoriale-svg-e-icon-fonts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/07\/post-main.jpg","datePublished":"2013-07-16T08:21:32+00:00","dateModified":"2023-02-27T14:40:38+00:00","description":"Parliamo di immagini svg e icon fonts per arricchire un sito di immagini scalabili che mantengano il loro livello di dettaglio.","breadcrumb":{"@id":"https:\/\/www.artera.net\/it\/marketing\/web-vettoriale-svg-e-icon-fonts\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.artera.net\/it\/marketing\/web-vettoriale-svg-e-icon-fonts\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/marketing\/web-vettoriale-svg-e-icon-fonts\/#primaryimage","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/07\/post-main.jpg","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/07\/post-main.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.artera.net\/it\/marketing\/web-vettoriale-svg-e-icon-fonts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.artera.net\/it\/"},{"@type":"ListItem","position":2,"name":"Il web in vettoriale: le immagini svg e gli icon fonts"}]},{"@type":"WebSite","@id":"https:\/\/www.artera.net\/it\/#website","url":"https:\/\/www.artera.net\/it\/","name":"Artera","description":"Swiss Premium Hosting","publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.artera.net\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/www.artera.net\/it\/#organization","name":"Artera","url":"https:\/\/www.artera.net\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/#\/schema\/logo\/image\/","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2019\/09\/artera-logo.png","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2019\/09\/artera-logo.png","width":300,"height":77,"caption":"Artera"},"image":{"@id":"https:\/\/www.artera.net\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/artera.net\/","https:\/\/www.linkedin.com\/company\/artera\/","https:\/\/www.instagram.com\/artera_swiss\/"]},{"@type":"Person","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0","name":"Sergio Ravera","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","caption":"Sergio Ravera"},"description":"Raised in a family tradition of merchants, my entrepreneurial spirit drove me to launch my first e-commerce venture in 1998. My vision and dedication led, in 2002, to the founding of Artera, now a leading brand in premium managed cloud hosting services. As Chief Executive Officer, I lead DHH Switzerland SA, part of the international DHH S.p.A. group, listed on the Milan Stock Exchange with the reference code (AIM \u2013 ISIN: IT0005203622). It is under this brand that the Artera brand continues to grow and thrive. In addition to my commitment to the business world, I am an active researcher in the field of new technologies, always fascinated by cutting-edge innovations in the industry.","sameAs":["https:\/\/www.linkedin.com\/in\/sergioravera\/"],"url":"https:\/\/www.artera.net\/it\/author\/sergio-ravera\/"}]}},"_links":{"self":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/15323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/comments?post=15323"}],"version-history":[{"count":4,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/15323\/revisions"}],"predecessor-version":[{"id":217565,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/15323\/revisions\/217565"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media\/15324"}],"wp:attachment":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media?parent=15323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/categories?post=15323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/tags?post=15323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}