Corsi on-line

Semplice logo in SVG

SVG (Scalable Vector Graphics) è un formato standard per la realizzazione di elementi grafici visualizzabili tramite browser Web; supportato da HTML5, esso risulta particolarmente utile e comodo da utilizzare in quanto consente di generare dinamicamente le immagini, inoltre, è compatibile con tutte le versioni più recenti delle applicazioni per la navigazione Internet maggiormente diffuse In HTML5 è disponibile nativamente l’elemento svg che funge da contenitore per le entità SVG.

svgIn questo post verrà analizzata la procedura necessaria per la creazione di un semplice logo costituito da una cornice ellittica con bordo grigio e sfondo colorato tramite due tonalità di azzurro entrambe sfumate e opacizzate. Al centro dello sfondo vi sarà una scritta bianca, quello che potrebbe essere un brand aziendale, della quale verranno definiti anche il font (Arial, ma potrebbe essere qualsiasi altra soluzione) nonché le dimensioni del carattere scelto.

Al fine di ottenere un risultato simile a quello proposto nell’immagine precedente (il lettore riuscirà senz’altro a creare qualcosa di più originale e gradevole), bisognerà definire innanzitutto il contenitore della componente grafica, motivo per il quale entrerà in gioco il precedentemente citato elemento svg;

<svg height="140" width="700">
<defs>
<linearGradient id="logo" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(0, 51, 102);stop-opacity:0.9" />
<stop offset="100%" style="stop-color:rgb(51, 102, 153);stop-opacity:0.8" />
</linearGradient>
</defs>
...
</svg>

Come mostrato nel codice, la prima operazione da compiere sarà quella relativa alla definizione della larghezza del contenitore, fatto questo verrà introdotto il selettore (nel nostro caso #logo) a cui associare l’ellisse che conterrà sfondo e scritta e il gradiente dello sfondo stesso; una volta completate le operazioni relative a quest’ultimo si potrà passare alla generazione dell’ellisse e del contenuto testuale:

<ellipse cx="260" cy="70" rx="255" ry="65" fill="url(#logo)" style="stroke:grey;stroke-width:4;" />
  <text fill="#ffffff" font-size="48" font-family="Arial" x="40" y="85">Blog MrWebmaster!</text>

Di seguito verrà messo a disposizione il codice della pagina Web che permetterà di produrre l’output desiderato.

<!DOCTYPE html>
<html>
<head>
<title>Semplice logo SVG</title>
</head>
<body>
<svg height="140" width="700">
  <defs>
    <linearGradient id="logo" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(0, 51, 102);stop-opacity:0.9" />
      <stop offset="100%" style="stop-color:rgb(51, 102, 153);stop-opacity:0.8" />
    </linearGradient>
  </defs>
  <ellipse cx="260" cy="70" rx="255" ry="65" fill="url(#logo)" style="stroke:grey;stroke-width:4;" />
  <text fill="#ffffff" font-size="48" font-family="Arial"   x="40" y="85">Blog MrWebmaster!</text>
</svg>
</body>
</html>

SVG rappresenta un’alternativa a Canvas, entrambi possono essere utilizzati per il rendering grafico bidimensionale, ma mentre SVG si basa su XML, Canvas si basa invece sul DOM (Document Object Model) e si dimostra adatto per la creazione di immagini al volo con JavaScript.

Post correlati
I più letti del mese
Tematiche