{"id":6247,"date":"2011-02-03T08:54:48","date_gmt":"2011-02-03T07:54:48","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=6247"},"modified":"2023-02-27T14:51:10","modified_gmt":"2023-02-27T14:51:10","slug":"creare-un-grafico-vettoriale-con-svg","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/marketing\/creare-un-grafico-vettoriale-con-svg\/","title":{"rendered":"Creare un grafico vettoriale con SVG"},"content":{"rendered":"

\"Il<\/a>SVG \u00e8 una tecnologia<\/strong> utile per definire elementi di grafica vettoriale definita fin dal 2001 dal W3c<\/a>. Capita ormai di imbatterci in alcuni elementi grafici o animazioni su web che non siano gestite con Flash o Javascript, ma con SVG e, aspettando che anche Internet Explorer, nella versione 9, possa supportare questo standard cerchiamo di introdurre con un semplice esempio questo linguaggio.<\/p>\n

SVG \u00e8 uno strumento di grafica vettoriale. Questo significa che i valori che vengono utilizzati per specificare le dimensioni, le misure e le coordinate all’interno dell’area di disegno non sono indicati in pixel, ma in numeri. Questa propriet\u00e0 intrinseca della tipologia di linguaggio permette, dunque, di poter scalare le immagini disegnate senza avere perdita di qualit\u00e0.<\/p>\n

Realizzare un grafico<\/h3>\n

Imbattendomi in SVG ho subito pensato ad uno degli esempi che tradizionalmente vengono proposti: la creazione di un semplice grafico bidimensionale<\/strong>. Il grafico che propongo ha come riferimento l’analisi delle statistiche<\/strong> di utilizzazione dei browser per il mese di dicembre 2010 cos\u00ec come indicate dal sito w3schools<\/a>.<\/p>\n

Per l’esperimento di quest’oggi andiamo a creare un file con estensione svg che pu\u00f2 essere visualizzato direttamente con il browser. Le prime righe del file sono sempre dedicate alla dichiarazione del doctype<\/strong> e quindi del tipo di contenuto che il file supporta. Noi vogliamo che il nostro sia un file svg, dunque, le dichiarazioni sono:<\/p>\n

[html]
\n<?xml version="1.0" standalone="no"?>
\n<!DOCTYPE svg PUBLIC "-\/\/W3C\/\/DTD SVG 1.1\/\/EN" "http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd">
\n<svg width="100%" height="100%" version="1.1" xmlns="http:\/\/www.w3.org\/2000\/svg">
\n[\/html]<\/p>\n

Le prime due righe si occupano proprio di specificare il doctype<\/strong>, mentre la terza crea l’elemento svg dentro il quale andremo a sviluppare il nostro grafico.
\nIn merito al doctype da utilizzare, nonostante il w3c faccia riferimento ad esso offrendone anche un elenco<\/a> dedicato alle varie versioni del linguaggio<\/strong>, su internet\u00a0 \u00e8 possibile leggere commenti che consigliano di non specificare il doctype<\/a> tenendo anche in conto della prossima specifica 1.2<\/em>. In futuro sapremo con maggiore sicurezza come muoverci in questo senso.<\/p>\n

Dunque, definito lo spazio di lavoro con il tag <svg><\/em>, del quale dobbiamo indicare le dimensioni (nel nostro caso abbiamo utilizzato il 100% della pagina),\u00a0 \u00e8 possibile utilizzare una sorta di head<\/em> per le definizioni del documento. Per fare ci\u00f2 utilizziamo il tag <defs><\/em> al cui interno posizioniamo alcune regole CSS:<\/p>\n

[html]
\n<defs>
\n\t\t<style type="text\/css">
\n\t\t\tline.gridY, line.axis{
\n\t\t\t\tstroke:rgb(0,0,0);
\n\t\t\t\tstroke-width:1;
\n\t\t\t}
\n\t\t\tpolygon.arrow{
\n\t\t\t\tfill:#000000;
\n\t\t\t\tstroke:#000000;
\n\t\t\t\tstroke-width:1;
\n\t\t\t}
\n ecc…
\n\t\t<\/style>
\n<\/defs>
\n[\/html]<\/p>\n

Terminata la parte di intestazione del nostro documento passiamo al corpo vero e proprio del grafico.<\/p>\n

La\u00a0 parte pi\u00f9 complessa da disegnare, per il nostro semplice esempio, \u00e8 la base del grafico. Il nostro scopo \u00e8 disegnare le due assi, e che ognuna abbia una freccia alla fine, le varie tacche per misurare la scala e le didascalie sia sull’asse delle ascisse che sulle ordinate.<\/p>\n

Partiamo dalle assi con frecce:<\/p>\n

[html]
\n\t<line x1="30" y1="550" x2="30" y2="0" class="axis" \/>
\n\t<line x1="30" y1="550" x2="580" y2="550" class="axis" \/>
\n\t<polygon points="30,0 33,7 27,7" class="arrow" \/>
\n\t<polygon points="580,550 573,553 573,547" class="arrow" \/>
\n[\/html]<\/p>\n

E’ molto semplice, soprattutto per chi ha gi\u00e0 avuto a che fare con il canvas per il disegno sul web o con altri linguaggi per la grafica<\/a>, comprendere il funzionamento di queste poche righe di codice.<\/p>\n

L’istruzione line<\/em> deve essere specificata con i parametri che indicano il punto di partenza e di arrivo della linea. Ovviamente le due coordinate sono identificate dalle due coppie di valori (x1, y1) e (x2, y2).<\/p>\n

L’elemento polygon<\/em>, invece definisce un poligono<\/strong> composto da X vertici, dove X \u00e8 il numero delle coppie indicate nell’attributo points<\/em>. Nel nostro caso sono entrambi piccoli triangoli che ci servono per disegnare le due frecce.<\/p>\n

Vediamo, inoltre, che per tutte le istruzioni abbiamo specificato l’attributo class<\/em> in modo da poter sfruttare le regole CSS indicate in fase di definizione<\/strong> (<defs>) del documento.<\/p>\n

Uno degli elementi pi\u00f9 utilizzati nel linguaggio SVG \u00e8 il <text><\/em>. Chiaramente, utilizzando text<\/em> possiamo definire un testo. Vediamo come lo possiamo utilizzare per indicare le voci sull’asse delle ascisse:
\n[html]
\n\t<text x="80" y="565" class="gridX ie">IE<\/text>
\n\t<text x="160" y="565" class="gridX ff">Firefox<\/text>
\n\t<text x="275" y="565" class="gridX chrome">Chrome<\/text>
\n\t<text x="390" y="565" class="gridX opera">Opera<\/text>
\n\t<text x="500" y="565" class="gridX safari">Safari<\/text>
\n[\/html]
\nL’elemento text<\/em> vuole solo un punto definito dalle due coordinate x<\/em> e y<\/em> che corrisponde al punto iniziale del disegno del testo. Anche in questo caso abbiamo specificato la propriet\u00e0 class<\/em> per aiutarci nella definizione della grafica dell’elemento.<\/p>\n

Infine, rimane da applicare la creazione delle barre per i valori da visualizzare sul grafico:
\n[html]
\n\t<rect width="50" height="134" class="ie" x="63" y="415" \/>
\n\t<rect width="50" height="214" class="ff" x="160" y="335" \/>
\n\t<rect width="50" height="109" class="chrome" x="275" y="440" \/>
\n\t<rect width="50" height="9" class="opera" x="390" y="540" \/>
\n\t<rect width="50" height="12" class="safari" x="500" y="537" \/>
\n[\/html]<\/p>\n

Anche in questo caso la comprensione del codice \u00e8 molto semplice: il rettangolo disegnato deve avere una certa dimensione (width&height) e un punto di inizio dal quale sviluppare il disegno che corrisponde al vertice alto di sinistra del rettangolo.<\/p>\n

\"Il<\/a><\/p>\n

Questo \u00e8 uno screenshot del grafico che abbiamo realizzato.
\nPer scaricare il codice completo clicca qui.<\/p>\n","protected":false},"excerpt":{"rendered":"

\"Il<\/a>SVG \u00e8 una tecnologia<\/strong> utile per definire elementi di grafica vettoriale definita fin dal 2001 dal W3c<\/a>. Capita ormai di imbatterci in alcuni elementi grafici o animazioni su web che non siano gestite con Flash o Javascript, ma con SVG e, aspettando che anche Internet Explorer, nella versione 9, possa supportare questo standard<\/a> cerchiamo di introdurre con un semplice esempio questo linguaggio.<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[300],"tags":[125,115,106,213],"class_list":["post-6247","post","type-post","status-publish","format-standard","hentry","category-marketing","tag-disegnare-su-web","tag-grafica-vettoriale","tag-html5","tag-svg"],"yoast_head":"\n\u2022 Creare un grafico vettoriale con SVG - Artera<\/title>\n<meta name=\"description\" content=\"Leggi dal blog: Creare un grafico vettoriale con SVG. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\" \/>\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\/creare-un-grafico-vettoriale-con-svg\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u2022 Creare un grafico vettoriale con SVG - Artera\" \/>\n<meta property=\"og:description\" content=\"Leggi dal blog: Creare un grafico vettoriale con SVG. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.artera.net\/it\/marketing\/creare-un-grafico-vettoriale-con-svg\/\" \/>\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=\"2011-02-03T07:54:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-27T14:51:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.artera.net\/wp-content\/uploads\/2011\/01\/svg.jpg\" \/>\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=\"5 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\\\/creare-un-grafico-vettoriale-con-svg\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/creare-un-grafico-vettoriale-con-svg\\\/\"},\"author\":{\"name\":\"Sergio Ravera\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\"},\"headline\":\"Creare un grafico vettoriale con SVG\",\"datePublished\":\"2011-02-03T07:54:48+00:00\",\"dateModified\":\"2023-02-27T14:51:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/creare-un-grafico-vettoriale-con-svg\\\/\"},\"wordCount\":1051,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/creare-un-grafico-vettoriale-con-svg\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2011\\\/01\\\/svg.jpg\",\"keywords\":[\"disegnare su web\",\"grafica vettoriale\",\"html5\",\"SVG\"],\"articleSection\":[\"Marketing\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/creare-un-grafico-vettoriale-con-svg\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/creare-un-grafico-vettoriale-con-svg\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/creare-un-grafico-vettoriale-con-svg\\\/\",\"name\":\"\u2022 Creare un grafico vettoriale con SVG - Artera\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/creare-un-grafico-vettoriale-con-svg\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/creare-un-grafico-vettoriale-con-svg\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2011\\\/01\\\/svg.jpg\",\"datePublished\":\"2011-02-03T07:54:48+00:00\",\"dateModified\":\"2023-02-27T14:51:10+00:00\",\"description\":\"Leggi dal blog: Creare un grafico vettoriale con SVG. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/creare-un-grafico-vettoriale-con-svg\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/creare-un-grafico-vettoriale-con-svg\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/creare-un-grafico-vettoriale-con-svg\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2011\\\/01\\\/svg.jpg\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2011\\\/01\\\/svg.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/creare-un-grafico-vettoriale-con-svg\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creare un grafico vettoriale con SVG\"}]},{\"@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":"\u2022 Creare un grafico vettoriale con SVG - Artera","description":"Leggi dal blog: Creare un grafico vettoriale con SVG. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","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\/creare-un-grafico-vettoriale-con-svg\/","og_locale":"it_IT","og_type":"article","og_title":"\u2022 Creare un grafico vettoriale con SVG - Artera","og_description":"Leggi dal blog: Creare un grafico vettoriale con SVG. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","og_url":"https:\/\/www.artera.net\/it\/marketing\/creare-un-grafico-vettoriale-con-svg\/","og_site_name":"Artera","article_publisher":"https:\/\/www.facebook.com\/artera.net\/","article_published_time":"2011-02-03T07:54:48+00:00","article_modified_time":"2023-02-27T14:51:10+00:00","og_image":[{"url":"https:\/\/www.artera.net\/wp-content\/uploads\/2011\/01\/svg.jpg","type":"","width":"","height":""}],"author":"Sergio Ravera","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Sergio Ravera","Tempo di lettura stimato":"5 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.artera.net\/it\/marketing\/creare-un-grafico-vettoriale-con-svg\/#article","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/marketing\/creare-un-grafico-vettoriale-con-svg\/"},"author":{"name":"Sergio Ravera","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0"},"headline":"Creare un grafico vettoriale con SVG","datePublished":"2011-02-03T07:54:48+00:00","dateModified":"2023-02-27T14:51:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.artera.net\/it\/marketing\/creare-un-grafico-vettoriale-con-svg\/"},"wordCount":1051,"commentCount":0,"publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"image":{"@id":"https:\/\/www.artera.net\/it\/marketing\/creare-un-grafico-vettoriale-con-svg\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2011\/01\/svg.jpg","keywords":["disegnare su web","grafica vettoriale","html5","SVG"],"articleSection":["Marketing"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.artera.net\/it\/marketing\/creare-un-grafico-vettoriale-con-svg\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.artera.net\/it\/marketing\/creare-un-grafico-vettoriale-con-svg\/","url":"https:\/\/www.artera.net\/it\/marketing\/creare-un-grafico-vettoriale-con-svg\/","name":"\u2022 Creare un grafico vettoriale con SVG - Artera","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.artera.net\/it\/marketing\/creare-un-grafico-vettoriale-con-svg\/#primaryimage"},"image":{"@id":"https:\/\/www.artera.net\/it\/marketing\/creare-un-grafico-vettoriale-con-svg\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2011\/01\/svg.jpg","datePublished":"2011-02-03T07:54:48+00:00","dateModified":"2023-02-27T14:51:10+00:00","description":"Leggi dal blog: Creare un grafico vettoriale con SVG. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","breadcrumb":{"@id":"https:\/\/www.artera.net\/it\/marketing\/creare-un-grafico-vettoriale-con-svg\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.artera.net\/it\/marketing\/creare-un-grafico-vettoriale-con-svg\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/marketing\/creare-un-grafico-vettoriale-con-svg\/#primaryimage","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2011\/01\/svg.jpg","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2011\/01\/svg.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.artera.net\/it\/marketing\/creare-un-grafico-vettoriale-con-svg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.artera.net\/it\/"},{"@type":"ListItem","position":2,"name":"Creare un grafico vettoriale con SVG"}]},{"@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\/6247","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=6247"}],"version-history":[{"count":7,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/6247\/revisions"}],"predecessor-version":[{"id":217802,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/6247\/revisions\/217802"}],"wp:attachment":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media?parent=6247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/categories?post=6247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/tags?post=6247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}