Conversion da VML a SVG

Innanzi tutto va sottolineato che un documento vml vero e proprio o esiste, il codice vml (cioè i tag) sono inseriti all'interno di un documento html, usando un apposito namespace. Svg invece è un tipo di documento xml vero e proprio, in cui tutto il contenuto è racchiuso in un elemento svg.

Per la conversione (per il momento) sono stati esclusi tutti i tag di html, in quanto non fanno parte della vera e propria "grafica" del documento e per effettuare una traduzione completa si dovrebbe (o potrebbe) creare un nuovo documento html, con la parte html identica e sostituendo alla parte vml, un tag object che include un documento svg.

Nella conversione, per prima cosa, è stato creato un elemento svg (contenitore) con dimensioni pari allo schermo (width e height impostati a 100%) che conterrà tutti gli altri elementi grafici. Questa soluzione si è resa necessaria per due motivi. Il primo consiste nel fatto che svg richiede che tutto il contenuto sia raggruppato all'interno di uno o più tag svg, mentre vml non ha un tag contenitore obbligatorio e quindi dobbiamo forzare in qualche modo la creazione di questo elemento (per esempio, se il documento vml conterrà un solo elemento rect, la traduzione creerà un documento svg con un solo elemento rect senza creare il "contenitore" svg e quindi il rettangolo non verrà visualizzato). Il secondo motivo riguarda l'uso dell'elemento DEFS, quest'elemento (di svg) rappresenta un contenitore che contiene tutti quegli elementi che saranno richiamati più volte nel documento (il suo contenuto non viene visualizzato direttamente, può solo essere richiamato).

Quest'elemento viene posto all'interno di questo primo tag svg, in modo che poi il suo contenuto possa essere tranquillamente richiamato da ogni altro elemento. Senza questa soluzione si dovrebbero creare tanti elementi defs, i quali probabilmente conterranno gli stessi elementi, portando ad una ripetizione, poco elegante, del codice.

Gestione DEFS:

Come appena accennato, all'interno del primo elemento svg viene creato l'elemento defs, che conterrà tutti gli elementi richiamati all'interno del documento. Vediamoli nel dettaglio.
  • Textpath:
    • Descrizione: in VML l'elemento textpath (che può essere contenuto esclusivamente in shape o shapetype) rappresenta un testo scritto all'interno di un path, questo path verrà determinato dall'ultimo elemento (o attributo) path contenuto nell'elemento shape (o shapetype). In SVG per inserire un testo in path, si utilizza l'elemento textpath (all'interno di un elemento text). Quest'elemento contiene un riferimento ad un elemento path (che contiene, naturalmente, il path). Questo path (visto che è un elemento che non verrà rappresentato direttamente ma a cui ci si riferisce) verrà inserito nell'elemento defs.
    • Realizzazione: per ogni elemento textpath contenuto nel documento VML si crea un elemento path. Innanzi tutto bisogna impostare il valore di id. Per fare in modo che sia univoco lo si uguaglia al numero di elementi che precedono textpath, più la stringa path (es textpath ha 5 elementi precedenti: id=path5). Poi da textpath si risale al padre. Se ha l'attributo/elemento path si utilizza questo valore; se è un elemento shape con attributo type si cerca l'elemento shapetype a cui si riferisce e si cerca path in quest'elemento. (Caso Particolare: shapetype con textpath ma senza path: si crea un elemento path per ogni elemento shape con type, per gestire questo caso. In questo modo potrebbero crearsi dei path inutilizzati, però si coprono tutti i casi possibili).
  • Gradient:
    • Descrizione: in VML l'elemento fill (e solo lui!) permette di definire un gradiente (mediante l'attributo type impostato a gradient o gradientradial). Una volta impostato type, vengono considerati altri attributi di fill che specificano le caratteristiche del gradiente (attributi: angle, colors, color, color2, focusposition, ...). In SVG, il gradiente viene definito tramite gli elementi linearGradient o radialGradient che sono esclusivamente definiti all'interno di defs e sono poi richiamati tramite attributo href.
    • Realizzazione: per ogni elemento fill con attributo type impostato a gradient o gradientradial si crea un elemento linearGradient o radialGradient, gestendolo considerando i vari attributi dell'elemento fill. Per l'id si utilizza o l'id presente in fill oppure (come nel caso textpath) si utilizza un valore univoco dato dal numero di elementi precedenti.
  • Pattern:
    • come per gradient, viene creato un elemento pattern per ogni fill (anche stroke??) che contengono l'attributo type uguale a frame (caso type = pattern: c'è ancora qualche problema)
  • Shapetype:
    • non considerato... vedi Elemento SHAPE.

Elemento GROUP:

Quest'elemento rappresenta un contenitore, cioè può contenere qualsiasi altro elemento. La traduzione naturale in SVG sarebbe tramite l'elemento G (anch'esso rappresenta un gruppo), tuttavia non è possibile, per alcune piccole differenze. Group, può (anzi deve) contenere degli attributi di posizionamento e dimensionamento (top, left, width e height), se non sono presenti il contenuto non verrà visualizzato; nell'elemento g di svg invece attributi di posizionamento/dimensionamento non sono ammessi. Inoltre group può contenere gli attributi coordorigin e coordsize per ridimensionare il suo contenuto. In svg questi si traducono con l'attributo viewBox, ma anche in questo caso l'elemento g non lo supporta. Quindi group è stato tradotto con un elemento svg, che in linea di principio (ma anche in pratica) svolge le stesse funzioni (cioè di contenitore).

Elementi SHAPE (e SHAPETYPE):

Quest'elemento serve per creare delle figure, tramite path, testi o inserimento di immagini. E' l'unico elemento di vml (assieme a shapetype) che supporta i path e i testi. Inoltre (tramite l'attributo type) si può riferire ad un altro elemento che serve per creare figure (shapetype), ridefinendone, eventualmente, alcune proprietà e caratteristiche. Shapetype è identico a shape tranne per il fatto che il suo contenuto non viene visualizzato, può essere solo richiamato. Serve per definire figure che saranno riusate più volte nel documento.

Traduzione:

  • Primo approccio: la traduzione naturale di questi due elementi è quella di rappresentare shapetype come un elemento svg inserito all'interno di defs (in modo che non venga visualizzato e possa essere richiamato), mentre shape viene anch'esso rappresentato con un elemento svg, nel caso si riferisca ad uno shapetype, si utilizza l'elemento use per effettuare il riferimento (use permette di richiamare un elemento definito all'interno di defs)
    • Problema: quando sia shape che shapetype definiscono gli stessi elementi o attributi, vml da precedenza alle caratteristiche definite in shape. Usando la traduzione svg + use, svg definisce le caratteristiche di shape, use richiama shapetype sovrascrivendo le proprietà già definite e quindi in questo modo si da precedenza a shapetype. Quindi pur essendo una traduzione che rispetta la struttura del documento presenta forti differenze di rappresentazione e di conseguenza va scartata
  • Soluzione finale: si traduce l'elemento shape con un elemento svg, ricercando eventualmente un elemento shapetype a cui ci si riferisce e combinando appropriatamente le caratteristiche dei due elementi. In questo modo in defs non ci sarà più la definizione di una figura, ogni shapetype presente è come se venisse copiato in ogni elemento che lo richiama (in pratica non viene copiato del tutto, si tengono solo le caratteristiche non presenti nel shape chiamante).

Elemento PATH (e attributo path):

Quest'elemento può essere presente solo in shape o shapetype e contiene un path che può essere visualizzato direttamente o usato per rappresentare un testo. Oltre a quest'elemento shape e shapetype possono definire l'attributo path che contiene anch'esso un path. La differenza tra l'utilizzo dei due è che l'elemento path permette di definire più caratteristiche.

La traduzione è abbastanza naturale, si utilizza l'elemento path di svg che presenta le medesime caratteristiche. Un problema è dovuto al fatto che utilizzano una diversa notazione per rappresentare i vari tipi di linea, non sempre traducibile mediante un cambio del nome del comando.

  • Sintassi dei path: i path sono espressi mediante un nome di comando seguito da uno o più punti, per esempio: "M 0,0" si sposta nel punto 0,0 "L 10,10" crea una linea dal punto corrente fino al punto specificato (da 0,0 a 10,10), "L 10,10, 20,20", crea due linee una dal punto corrente a 10,10 e una da 10,10 a 20,20. C'è un comando particolare, X, che permette di chiudere il path, disegna una linea dall'ultimo punto disegnato fino al punto iniziale.
  • Traduzione: in svg i path sono rappresentati alla stessa maniera, molti comandi hanno la stessa forma e lo stesso nome, altri hanno un nome diverso (per la traduzione basta una semplice traduzione di lettere). Infine ci sono comandi che hanno una diversa gestione, cioè utilizzano un diverso numero di punti ed eventualmente si basano su punti precedenti, o su altre considerazioni. Per alcuni di questi comandi si è realizzata una traduzione equivalente lavorando un po' sui valori del comando. Altri comandi sono stati tradotti con un'approssimazione. Alcuni non sono traducibili (nf, ns: servono per segnalare che da quel punto del path in avanti non bisogna effettuare il riempimento o disegnare il bordo; non c'è un modo per fare la stessa cosa in svg).

L'elemento path inoltre presenta vari attributi (alcuni per segnalare se visualizzare il testo o il path, altri per impostare il rettangolo in cui inserire la textbox). Ci sono alcuni attributi che non sono stati gestiti (per esempio l'inserimento di frecce nel path), comunque non di fondamentale importanza.

NOTE: *alcuni path tradotti con approssimazioni, alcune caratteristiche non traducibili.

  • Non tutti gli attributi tradotti/traducibili.

Elementi FILL e STROKE (anche attributi):

In vml ci sono due elementi specifici (fill e stroke) per specificare le proprietà del riempimento e del bordo delle figure (oltre all'utilizzo dei semplici attributi fill e stroke); in presenza sia dell'elemento che dell'attributo corrispondente (esempio ) ha la precedenza l'elemento, che sovrascrive le proprietà specificate in precedenza (nell'esempio il rettangolo viene riempito di rosso). In svg ci sono solo gli attributi fill e stroke.

Traduzione: per ogni elemento si impostano le proprietà di painting cercando prima gli elementi fill e stroke, se non ci sono si cercano gli attributi all'interno dell'elemento, se neanch'essi sono presenti si impostano le proprietà di default. Da notare che non si ricercano queste proprietà negli elementi precedenti perché in vml non c'è nessun modo di far ereditare questi valori (ogni elemento non può "passare" questi valori ai figli, eccezion fatta per shapetype-shape, ma viene gestito ad hoc).

Questi due elementi presentano vari attributi (per rappresentare semplici colori, gradienti e altro) di cui è stata gestita la maggior parte, tralasciandone alcuni di dubbia traducibilità.

  • NOTE: traduzione non completa ma abbastanza esaustiva

Elemento TEXTBOX:

Quest'elemento può essere contenuto all'interno di shape o shapetype e serve per inserire del testo. Il contenuto di questo elemento può essere testo semplice oppure tag html. La "scatola" in cui viene rappresentato il testo è definita dall'attributo textboxrect definito all'interno dell'elemento path (figlio di shape o shapetype). La traduzione di quest'elemento è semplificata, in quanto non vengono gestiti tutti i tag html (per esempio posso definire delle tabelle, ma quest'opzione è molto difficile da rappresentare in svg, se non impossibile), sono stati considerati gli elementi in qualche modo riferiti al testo; quindi sono stati tradotti i tag b ed i che hanno un ruolo importante per quanto riguarda il testo e l'attributo style, che anch'esso influisce la rappresentazione del testo.

  • NOTE: textbox richiederebbe una gestione di html, fatta solo in parte.

Elemento TEXTPATH:

Quest'elemento può essere contenuto all'interno di shape o shapetype e serve per inserire un testo all'interno di un path. Per poter essere rappresentato serve all'interno dell'elemento path (figlio di shape o shapetype) l'attributo textpathok impostato a true, in questo modo non viene visualizzato il path e si visualizza il testo. La traduzione viene effettuata mediante un elemento textpath (contenuto all'interno di un elemento text), quest'elemento contiene un attributo (href) per riferirsi al path, questo path (come specificato in precedenza, vedi DEFS) viene inserito nell'elemento defs. Textpath presenta varie caratteristiche per la rappresentazione del testo, come il ridimensionamento del testo per inserirlo completamente nel path (si rimpiccolisce il testo dimensionandolo in base alla lunghezza del path), questa caratteristica non è traducibile in svg. Inoltre textpath, tramite l'attributo style, permette di definire varie proprietà sul testo: font-style, font-family, etc. Di queste sono state considerate solo quelle fondamentali, tralasciandone alcune di minor importanza (e forse non gestibili).

Problemi col TESTO:

  • in svg il testo viene deformato in base al valore di viewbox, in vml il testo non viene condizionato da coordsize
  • textpath: in vml se il testo è più lungo del path, viene visualizzato "fuori", mentre in svg viene troncato
  • non tradotte tutte le proprietà (quelle fondamentali si)

Elemento IMAGEDATA (e IMAGE):

Imagedata serve per inserire un'immagine esterna. Può essere contenuto solo all'interno di shape o shapetype. Si traduce con l'elemento image di svg che serve anch'esso per inserire immagini esterne. Image, svolge lo stesso ruolo, solo che viene inserito esternamente a shape/shapetype. La traduzione si effettua anche in questo caso con l'elemento image.

  • NOTE: image e imagedata supportano molti attributi per la definizione della figura (contrasto, luminosità, scala di grigi, ...) che non sono considerati nella traduzione.

FIGURE PREDEFINITE (Rect, Roundrect, Line, Polyline, Curve, Oval, Arc):

Questi elementi sono banalmente traducibili in corrispondenti elementi svg, con alcune eccezioni. Per gli elementi Curve e Arc non ci sono corrispondenti elementi e quindi vengono rappresentati creando un path. Da notare che arc permette di definire l'angolo di inizio e di fine dell'arco, mentre (per semplicità) il path creato da svg può essere rappresentato solo mediante quarti di arco, per esempio se definisco un arco che va da 20 gradi a 130, in svg avrò lo stesso arco (nel senso di dimensioni) ma verrà rappresentato da 0 a 180.

  • NOTE: traduzione in parte approssimata (arc).

Elemento BACKGROUND:

Non gestito

Elemento SHADOW:

Non gestito

Elemento FORMULAS (e F):

Non gestibile

Elemento HANDLES (e H):

Non è da tradurre, serve per effettuare modifiche dell'immagine all'interno di Office

Dimensioni:

Tutte le dimensioni di vml sono gestite in modo appropriato traducendole tutte senza unità di misura (e senza percentuali), nei corrispondenti valori. Ci sono alcune considerazioni da fare, riguardo alla dimensione dei font e dei bordi. Per quanto riguarda i testi, qualunque sia la dimensione delle figure e i ridimensionamenti effettuati da coordsize, il valore di font-size non ne viene influenzato, è un valore "assoluto", quindi per effettuare una traduzione in svg (in cui il testo è influenzato dai dimensionamenti), bisogna effettuare varie traduzioni in base alle dimensioni degli elementi che contengono il testo. Per i bordi il discorso è analogo, e quindi i bordi avranno la stessa dimensione sia per la larghezza che per l'altezza non facendosi influenzare da coordsize. In svg invece i bordi possono avere una diversa rappresentazione per l'altezza e per la larghezza in base ai valori di viewBox (cioè un rettangolo può avere i bordi più larghi ai lati verticali rispetto a quelli orizzontali). Questa differenza non può venire gestita nella traduzione.

Attributi Comuni:

Quasi tutti gli elementi si vml presentano una serie di attributi comuni che si dividono in due categorie: Core e Shape. Gli attributi core forniscono informazioni strutturali della figura (dimensionamenti, scale, ...) oltre ad avere attributi quali id, class, href. Questi attributi sono più o meno traducibili con una nota a parte per style Gli attributi shape invece forniscono informazioni sulla resa grafica della figura (sui colori interni ed esterni, opacità, ...) anche questi sono facilmente traducibili.

  • NOTE: questi attributi comuni sono stati tradotti quasi tutti, escludendo alcuni non di fondamentale importanza.

Attributo Style:

Molte proprietà in vml sono inseriti nell'attributo style (left, top, width, height, ...) e per effettuare una corretta estrazione devono essere estratti e convertiti in appropriati attributi. Quest'operazione non presenta grosse difficoltà, tuttavia non tutte le caratteristiche di style sono state tradotte. Ci sono alcune proprietà che non sono traducibili (z-index: dice l'ordine delle figure, nel senso di quale visualizzare a livello più alto, quale mettere sotto, ...), altre invece non sono state tradotte in quanto di minore importanza.

  • NOTE: non tutte le proprietà tradotte/traducibili.

Trasformazioni (rotate, scale, translate):

A differenza di svg, che presenta un attributo per definire le varie trasformazioni, vml non presenta un tale attributo. Tuttavia anche in vml è possibile effettuare le principali trasformazioni (rotate, scale e translate). Per effettuare la rotazione si utilizza la proprietà rotation all'interno di style (che effettua una rotazione rispetto al centro della figura). La traduzione in questo caso è realizzabile molto semplicemente, basta creare un gruppo con transform che include la proprietà rotate. Rotate di svg ruota la figura rispetto all'angolo in alto a sinistra della figura, e quindi diversa da vml, tuttavia supporta due parametri che segnalano il punto rispetto a cui effettuare la rotazione e quindi si riesce a svolgere la trasformazione in modo equivalente. Per effettuare operazioni di scale non è presente nessun attributo specifico in vml, si eseguono semplicemente utilizzano i valori di coordsize per rimpicciolire o ingrandire le figure (equivalenti a viewBox di svg). Anche per le traslazioni non ci sono attributi specifici, per effettuarle si crea un gruppo impostando opportunamente i valori di top e left.

-- GianlucaZonta - 09 Dec 2004

Revision: r1.1 - 09 Dec 2004 - 16:18 - GianlucaZonta
Copyright © 1999-2019 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Fabio's Wiki? Send feedback