Skip to topic | Skip to bottom
Home

Tesi
Tesi.SvgVmlr1.1 - 09 Dec 2004 - 16:06 - GianlucaZontatopic end

Start of topic | Skip to actions

Conversione da SVG a VML

Piccola descrizione della struttura di VML:

VML (Vector Markup Language) non è un vero e proprio formato grafico (stile xml) ma definisce alcuni elementi grafici da inserire all'interno di un documento html, per poterli usare bisogna definirne il namespace (es: xmlns:v="urn:schemas-microsoft-com:vml") e all'interno dell'elemento style si definisce l'istruzione v\:* {behavior: url(#default#VML); } che comunica al browser di passare tutti i tag che iniziano con v: al rendering object.

Questo linguaggio definisce un piccolo insieme elementi e un piccolo insieme di attributi. Ci sono alcuni attributi di base, comuni a molti elementi (id, class, style,..., opacity, stroke,fill, ...) che definiscono informazioni essenziali per la rappresentazione grafica. Tra questi attributi due di particolare importanza sono coordorigin e coordsize che definiscono uno spazio di coordinate e vengono usati da quegli elementi che definiscono blocchi di contenimento (shape, group). Coordsize definisce quante unità ci sono all'interno del blocco, coordorigin definisce il valore delle coordinate nell'angolo in alto a sinistra del blocco. Ogni elemento definito all'interno del blocco verrà influenzato da queste coordinate. Per esempio definendo un elemento group con width e height di 300 pixel e con coordsize di 1000,1000 ho definito una regione di 300x300 pixel con 1000 unità sia per le ascisse che per le ordinate. Se definisco un elemento rect (che crea un rettangolo) all'interno del gruppo con width e height di 500 (senza specificare l'unità di misura, in modo che me le consideri misurate nelle unità del blocco che contiene quest'elemento) verrà creato un rettangolo di 150x150 pixel.

Elementi principali:
  • shape: definisce una figura
  • shapetype: definisce una figura a cui riferirsi più volte tramite l'elemento shape (contiene l'attributo id, per riferirsi a questa figura, nell'elemento shape bisogna specificare l'attributo type con valore uguale al valore di id)
  • group: usato per raggruppare figure (eventualmente anche altri gruppi) che verranno posizionate e trasformate come una singola unità
  • path: definito all'interno di shape o shapetype per definire un path per creare una figura. Contiene l'attributo v che specifica i punti del percorso e i tipi di movimenti della penna (linee, curve, ...)
  • fill, stroke: descrivono come la figura dev'essere riempita e come dev'essere il bordo
  • textbox, textpath: servono per definire un testo all'interno di una figura o definendo il percorso dove scriverlo
  • imagedate, image: per inserire nel documento un'immagine da una sorgente esterna
  • line, polyline, curve, rect, roundrect, oval, arc: figure predefinite

Piccola descrizione della struttura di SVG:

SVG (Scalable Vector Graphics) è un linguaggio per descrivere figure bidimensionali e applicazioni grafiche in XML. I documenti svg sono dei documenti xml, il cui elemento radice è svg (possono essercene più di uno) che definisce una regione dello schermo in cui verranno rappresentate tutte le figure. Può contenere l'attributo viewBox che serve per definire un sistema di coordinate locali, contiene quattro valori, i primi due rappresentano i valori di x e di y nell'angolo in alto a sinistra, mentre gli altri due valori rappresentano il numero di unità (user unit) per la larghezza e per l'altezza.

Elementi principali:
  • g: è un elemento contenitore che serve per raggruppare assieme vari elementi grafici
  • defs: elemento contenitore per elementi riferiti. Contiene vari elementi che non verranno visualizzati direttamente ma a cui ci si può riferire all'interno del documento
  • use: fa riferimento ad altri elementi il cui contenuto verrà incluso/disegnato nella regione definita da use
  • path: rappresenta le linee esterne di una figura. Contiene l'attributo d che serve per specificare i vari punti e i vari tipi di collegamenti (linee, curve, ...)
  • rect, circle, ellipse, line, polyline, polygon: figure predefinite
  • text: serve per rappresentare dei testi

Conversione tra SVG e VML

Elemento SVG

Nei documenti svg viene rinchiuso tutto in un elemento svg, quindi nella conversione si vuole cercare di ottenere un elemento che contenga tutto il resto. In vml ci sono 3 elementi contenitori (group, shape e shapetype), dei quali quello più appropriato è group; quindi tutto il contenuto del documento svg verrà inserito (dopo opportune conversioni) in un elemento group, il quale a sua volta è inserito in un documento html, come unico tag all'interno di body. La conversione tra i due elementi è pressoché immediata, gli attributi x, y, width e height vengono tradotti nell'attributo style come valori di left, top, width e height. L'attributo viewBox (contenente 4 valori) viene suddiviso negli attributi coordorigin e coordsize. Se viewBox non è presente bisogna comunque mettere gli attributi coordorigin e coordsize, in questo caso vengono impostati coi valori di x, y, width, height, tradotti in pixel, se non sono presenti, x e y corrisponderebbero a 0 e width e height a 100%. Il problema si presenta nella traduzione dell'elemento preserveAspectRatio, che serve per mantenere le proporzioni delle figure indipendentemente dal sistema di coordinate usato (definito tramite l'attributo viewBox). Cioè se abbiamo per esempio un rettangolo di 400x400 e viewBox definisce le dimensioni con 400x200, senza PreserveAspectRatio? (o meglio, impostato a none) il rettangolo risulterà schiacciato; con PreserveAspectRatio? il rettangolo risulterà un vero e proprio quadrato ma di dimensione 200x200. Sembra che vml non supporti operazioni di questo tipo. Inoltre Svg dà la possibilità di fare clipping della figura, cioè tutto quello che sta al di fuori della regione definita da viewBox non viene visualizzato (salvo diversa specificazione, attributo overflow), in vml non c'è la possibilità di definire questa opzione.

  • Traduzione: moderatamente facile (per tutti gli attributi c'è una traduzione 1-1, tranne preserveAspectRatio che sembra intraducibile e clipping anch'esso intraducibile).
  • NON TRADUCIBILI: @preserveAspectRatio, clipping

Elemento G

Quest'elemento rappresenta un contenitore di figure. La traduzione in vml è abbastanza immediata, si usa l'elemento group, che svolge il medesimo ruolo, l'unica differenza è che mentre g non ha attributi per definire dimensioni e posizioni, l'elemento group richiede (se non sono presenti non visualizza il contenuto!) attributi di posizionamento e dimensionamento (attributo style con all'interno top, left, width e height), per fare questo, si impostano i valori di left e top a 0, mentre width e height si impostano con i valori di viewBox del primo elemento ancestor che ha tale attributo. Più complesso è il caso in cui è presente l'attributo transform (che serve per effettuare delle trasformazioni, shift, rotazioni, modifiche della scala, ...), tradotto creando un gruppo per ogni operazione di trasformazione che contiene opportuni valori degli attributi di posizionamento, dimensionamento e di coordinate.

  • Traduzione: abbastanza facile

DIMENSIONI

Tutte le unità di misura (ad eccezione di quelle definite nell'elemento svg) vengono tradotte, tramite un opportuno template in user unit (che corrisponderebbero alle dimensioni in pixel). Lasciando il valore con la sua unità di misura, la visualizzazione risulta errata, dovuta alla presenza degli attributi coordsize che fanno in modo che le dimensioni effettive non corrispondano più alle dimensioni reali. Con questa conversione si risolve il problema, mantenendo le dimensioni nella misura corretta. Nel caso siano presenti valori percentuali, si cerca il valore a cui corrispondono e vengono opportunamente tradotti.

  • Traduzione: abbastanza semplice
  • DA FARE:
    • Per i valori espressi in % si è cercato il corrispondente valore a cui si riferiscono solo per gli attributi principali. Per gli altri attributi si è scelto un valore di default (si riferiscono tutti alla dimensione di width), si potrebbero gestire opportunamente
    • Non gestito il caso di valori espressi in ex (valore di x height)

ATTRIBUTI COMUNI

Svg ha molti attributi comuni a molti elementi, suddivisi in varie classi. La loro gestione è molto variegata, per alcuni basta una semplice traduzione di nome, per altri sembra che una traduzione sia irrealizzabile.

  • Traduzione: variegata

  • NB: NON TRADOTTI TUTTI, SOLO QUELLI PIU' IMPORTANTI

ATTRIBUTI EREDITATI

Molti attributi di svg, se non specificati ereditano il valore dagli elementi ancestor. Per fare in modo che anche nella traduzione in vml avvenga questo, bisogna forzare la ricerca negli attributi precedenti. Non può essere lasciata automatica (cioè senza mettere l'attributo) perché molte volte gli attributi dei due linguaggi hanno nomi differenti o perché il valore di default (nel caso che nessun ancestor abbia l'attributo) per i due linguaggi è diverso. Ci sono attributi che presentano delle difficoltà maggiori (opacity, il valore dell'attributo è dato dalla moltiplicazione del valore dell'elemento corrente e tutti gli elementi precedenti), ma tutto sommato la traduzione non presenta difficoltà.

  • Traduzione: abbastanza semplice

Elemento DEFS

Rappresenta un contenitore di elementi che non vengono direttamente visualizzati, ma che sono richiamati in altre parti del documento (per esempio tramite l'elemento use).

La traduzione (l'unica possibile *) consiste nell'ignorare del tutto questo elemento e nel trattare il suo contenuto man mano che viene richiamato da altri elementi (per esempio, quando un elemento use chiama un elemento contenuto in defs, si gestisce quest'ultimo elemento on-the-fly. Quindi se per esempio ho 10 elementi use che richiamano lo stesso rettangolo, nel mio documento vml avrò i 10 elementi use ognuno dei quali conterrà un elemento rettangolo). Il problema in questa traduzione viene dai valori ereditati. Se un elemento definito in defs non dichiara alcuni attributi, di norma questi dovrebbero essere ereditati (dall'attributo chiamante), però usando questa tecnica, gli elementi ancestor dell'attributo chiamato vengono considerato defs e i suoi precedenti e non use. Sembra che non ci sia soluzione a questo problema perché quando trovo use, creo un elemento group con sottoelementi che definiscono le varie proprietà (fill, stroke o altro), poi cerco il corrispondente elemento riferito e lo inserisco all'interno del gruppo. Il problema viene dal fatto che quest'elemento NON erediterà nessun attributo da group; questa è una caratteristica di vml e credo non ci si possa fare niente.

In "teoria" un soluzione più semplice e ragionevole ci sarebbe. Definisco il contenuto di defs in vari elementi shapetype e quando trovo use creo un elemento shape che richiama un elemento shapetype. Il problema viene dal fatto che in defs posso definire di tutto, per esempio un rettangolo (elemento rect), mentre in shapetype non posso definire tutto ma solo path e testi e quindi questa traduzione non è fattibile.

  • Traduzione: semplice ma con problemi, non vengono ereditati gli attributi.

Elemento SYMBOL

Più o meno svolge lo stesso ruolo di defs

Elemento USE

Quest'elemento è usato per riferirsi ad altri elementi (definiti in defs oppure symbol, ma potrebbe riferirsi anche a elementi svg). Traduzione (vedi DEFS): * creo un elemento group con gli attributi di use (opportunamente tradotti) e cerco in defs l'elemento con id uguale all'attributo href, se lo trovo chiamo il template che gestisce quell'elemento, che quindi verrà inserito all'interno di group. Il problema è che non vengono ereditati i valori da use o dagli elementi precedenti.

  • Traduzione: problematica (vedi defs)

Elementi DESC, TITLE

Rappresentano una descrizione all'interno del documento, non vengono visualizzati, servono solo per migliorare la leggibilità interna. Title viene tradotto nell'attributo title. Desc viene trodotto come commento.

  • Traduzione: ok

Elemento IMAGE

Inserisce un'immagine esterna in un rettangolo definito dai suoi attributi. Per la traduzione si crea un elemento image con l'attributo src uguale all'attributo href. Può contenere l'attributo transform, che viene gestito inserendo l'elemento image in tanti gruppi quanti sono gli elementi in transform, ognuno opportunamente gestito. Problemi invece riguardano la rappresentazione dell'attributo preserveAspectRatio, che probabilmente non è traducibile.

  • Traduzione: abbastanza semplice (considerando preserveAspectRartio non traducibile)

Elemento STYLE (e attributo)

Quest'elemento, usato per definire proprietà di stile, crea grossi problemi, in quanto definisce le proprietà usando i nomi degli attributi di svg, quindi se viene tradotto in elemento style con contenuto uguale, gli elementi di vml erediteranno degli attributi che non saranno utilizzabili. Soltanto una minima parte di attributi ha lo stesso nome sia per vml che per svg. Inoltre alcuni attributi usati da svg in vml vengono definiti all'interno dell' attributo style, il che crea ulteriori problemi, perché ereditando gli attributi con style, questi verranno trattati come attributi separati e quindi svg non sarà in grado di gestirli.

La soluzione adottata è stata la seguente:

  • per alcune proprietà (fill, stroke, font, ...) si cercano i valori prima all'interno dell'elemento, se non sono presenti si cerca in un eventuale attributo style all'interno dell'elemento, se non è presente si cerca negli elementi style (controllando opportunamente i selettori, in base a class, id e al nome dell'elemento) se sono presenti queste proprietà. In caso negativo, vengono cercate ricorsivamente negli elementi ancestor, e se da nessuna parte vengono trovate si impostano coi valori di default. Questa soluzione risolve anche il problema dell'attributo style di vml, in quanto le proprietà di font vengono cercate e inserite tutte all'interno dell'attributo style.
  • Le altre proprietà per il momento non vengono gestite (non essendo di fondamentale importanza), comunque è possibile effettuare una traduzione analoga

  • Traduzione: gestione ad hoc di ogni proprietà
    • DA FARE: non tradotti tutte le proprietà
    • NB: tutte le proprietà non ancora gestite sono comunque proprietà che non vengono estite neanche nel caso siano presenti direttamente e non all'interno di style.

Trasformazioni, l'attributo TRANSFORM

Quest'attributo serve per effettuare delle trasformazioni che possono essere di 6 tipi: translate, scale, rotate, matrix, skewX e skewY. Visto che in vml non c'è un corrispondente attributo che svolge le medesime funzioni, la traduzione viene effettuata creando un gruppo per ogni operazione di trasformazione, impostando opportunamente i suoi parametri e copiando all'interno della catena di gruppi il contenuto dell'elemento che aveva l'attributo transform. Alcune trasformazioni sono realizzabili (translate, scale, rotate), altre sembrerebbero irrealizzabili (matrix, skewX, skewY). SkewX? e skewY rappresentano un inclinazione delle immagine sull'asse delle x e delle y, in vml non sembra esserci nessun modo per far inclinare un immagine. Matrix, specifica una matrice di trasformazione, ogni trasformazione può essere considerata come una matrice con opportuni valori da applicare ai valori di x e y dell'elemento da trasformare. Quindi visto che skewX e skewY non si riescono a realizzare e matrix potrebbe rappresentare la stessa operazione si deduce che neanche matrix (nella sua interezza) è traducibile.

Rotate, sembrerebbe facilmente traducibile, in quanto vml ammette l'attributo rotate, quindi potrebbe essere una traduzione 1-1. Invece questa traduzione presenta dei problemi perché svg considera la rotazione a partire dall'angolo in alto a sinistra, mentre vml a partire dal centro della figura; quindi per effettuare la traduzione si deve prima effettuare uno spostamento, poi effettuare la rotazione. Inoltre svg permette di specificare il punto rispetto a cui fare la rotazione, ma in questo caso non ci sono particolari problemi perché questa trasformazione corrisponde ad effettuare uno spostamento (translate, verso i due punti), la rotazione ed un altro spostamento (rispetto all'inverso dei dui punti) e quindi ci si riconduce a dover tradurre due spostamenti ed una rotazione normale.

Scale e translate sono facilmente traducibili (c'è un punto sottile da considerare: se scale vale 0, tutte le trasformazioni non vengono considerate). Translate: viene creato un gruppo con i valori di x e y impostati con i due valori di translate (se non sono presenti valogono 0). Da considerare che i valori vengono sempre considerati in user unit, anche se un valore presenta l'unità di misura, questa dev'essere ignorata. Scale: creo un gruppo con x e y impostati a 0, in più uso gli attributi coordorigin (0,0) e coordsize, impostato col valore precedente diviso per il valore di scale. In questo modo, riducendo o aumentando il numero di coordinate, gli elementi contenuti all'interno del gruppo verranno automaticamente aumentati o diminuiti proporzionatamente. Un altro aspetto da considerare riguarda i valori di width e height dei vari gruppi, che vanno impostati con i valori di coordsize dell'ultimo elemento ancestor. Quindi se ho una trasformazione di tipo scale, i valori di width e height dei gruppi andranno impostati con i nuovi valori di coordsize.

*Traduzione
complessa (per alcune trasformazioni realizzabile (scale, translate e rotate), per altre sembra irrealizzabile (skewX, skewY, matrix)).

Elemento PATH:

Questo elemento mi crea una figura (disegnando le linee esterne), specificando il perimetro punto per punto. Anche vml presenta un elemento path, con la medesima funzione, tuttavia la traduzione è molto problematica perché i due elementi hanno due modi completamente diversi per rappresentare i vari tipi di linee (linee rette, curve, archi,...), ogni istruzione è formata da una o più lettere (tipo di operazione, es: m:move, a:arc), seguita da un certo insieme di punti. Tutte queste istruzioni sui collegamenti fra punti sono contenute in un attributo (d per svg, v per vml), alcune istruzioni sono identiche fra i due linguaggi (m: move, l: line), altre oltre ad avere nomi diversi trattano gli argomenti in modo diverso, oppure richiedono un diverso numero di valori, il che rende difficile la traduzione, inoltre certe istruzioni elaborano i valori di punti precedenti (se presenti), quindi per la traduzione bisogna effettuare complesse operazioni di estrazione di valori all'interno dell'unica stringa, rappresentata dal valore dell'attributo.

Nel dettaglio:

  • I path sono definiti in questa forma: "nome-comando insieme-di valori", per esempio "m 10 10 l 50 10" effettua uno spostamento nel punto 10,10 e a partire da lì disegna una linea fino al punto 50,10. Svg e vml definiscono molte istruzioni in maniera simile (stesso nome per l'istruzione o simile, stesso numero di argomenti), però ci sono alcune istruzioni (abbreviazioni di altre istruzioni) che mette a disposizione svg che non hanno una corrispondenza diretta in vml.

  • Per esempio entrambi i linguaggi hanno il comando c (curve) che richiede 6 parametri e serve per disegnare una curva. Svg ha anche il comando s (smooth curve), anch'esso serve per disegnare una curva , ma richiede solo 4 punti, gli altri due vengono presi dalla riflessione degli ultimi due punti della curva precedente (se è presente). In pratica serve per disegnare una seconda curva, risparmiandosi di scrivere due valori. Per tradurlo in vml bisogna usare il comando c, però bisogna riuscire a recuperare i due valori mancanti, e questo non è molto semplice, perché si dovrebbero andare a vedere i valori precedenti a c (il terzo e quarto valore di sei) che potrebbero eventualmente non essere presenti se il comando precedente non è c.

La traduzione è stata effettuata per il maggior numero possibile di operazioni, alcune sono tradotte correttamente (effettuando vari aggiustamenti), altre invece vengono approssimate (in quanto troppo complesse per venire tradotte o non supportate).

  • Traduzione: molto difficile (molte operazioni trattano gli argomenti in maniera diversa e in un diverso numero, richiedono complesse operazioni di estrazioni di sottostringhe.

Figure predefinite (RECT, CIRCLE, ELLIPSE, LINE, POLYLINE, POLYGON)

La traduzione di queste figure è abbastanza semplice (tranne nel caso del rettangolo con angoli arrotondati), in quanto per ogni elemento di svg c'è un corrispondente elemento di vml, tranne nel caso di polygon e circle, ma questi ultimi vengono considerati un caso particolare di polyline e ellipse. Un po' diverso è il caso di rect. Ci sono due tipi di rettangoli, quello normale (traduzione immediata) e quello con gli angoli arrotondati. Per quest'ultimo ci sarebbe una traduzione naturale nell'elemento di vml roundrect, però questo non gestisce la parte arrotondata nello stesso modo che il rect di svg (roundrect ha un solo attributo che definisce la percentuale della dimensione del rettangolo, rect invece definisce due raggi di ellisse per le x e per le y). Quindi per effettuare una traduzione corretta bisogna disegnare il rettangolo tramite l'elemento path.

  • Traduzione: facile (rect arrotondato tradotto con path, ma nessuna difficoltà)

Elementi TEXT, TSPAN, TREF, TEXTPATH

Servono per scrivere del testo con vari effetti grafici. Qui appare evidente in maniera maggiore rispetto agli altri elementi la differenza tra svg e vml. Svg si sbizzarrisce nel definire tanti possibili effetti per rappresentare testi, mentre vml definisce due elementi comprensivi di poche opzioni, quindi per effettuare una traduzione soddisfacente (una traduzione precisa sembra irrealizzabile), bisogna suddividere il testo in tante parti e gestirle separatamente. Andiamo nel dettaglio: l'elemento text, senza figli, è tranquillamente traducibile mediante l'elemento textpath di vml (inserito all'interno di shapetype, che dovrà contenere un path per rappresentare il testo), per farlo bisogna calcolare la lunghezza del testo, moltiplicare per la dimensione del font e selezionare un path (una linea retta in questo caso) con questa lunghezza in cui inserire il testo. L'unico problema con questo elemento viene dagli attributi x e y, che rappresentano le coordinate di posizionamento. Questi attributi possono contenere un singolo valore (semplice) o valori multipli (ogni valore rappresenta la posizione dell'i-esimo carattere); quest'ultimo caso risulta problematico, e per il momento (forse per sempre) non e' stato considerato.

Le cose si complicano se text contiene tspan o tref. Questi elementi rappresentano dei blocchi di testo da inserire all'interno di text (un paragone si può fare con i tag b e i di html), la differenza tra i due è che il primo definisce al suo interno il testo, mentre il secondo contiene un link ad un testo definito esternamente (all'interno dell'elemento defs). Questi elementi (come text) contengono attributi di posizionamento (x e y, posizionamento assoluto) e attributi di offset (dx e dy, posizionamento relativo alla posizione corrente del testo). Il problema deriva dal fatto che il testo contenuto in text viene influenzato da questi elementi, i caratteri posizionati dopo uno di questi elementi verranno visualizzati (logicamente) successivamente ai caratteri di tspan o tref. Quindi, per gestire questa situazione bisogna considerare ogni singola parte del testo, cioè ogni frammento di text che precede o segue tspan/tref, e ogni testo di tspan e tref. Ognuna di queste parti viene posizionata considerando la lunghezza e le coordinate delle parti precedenti. Queste operazioni risultano straordinariamente complesse ma tuttavia sono realizzabili.

L'elemento text può inoltre contenere textPath che inserisce un testo all'interno di un path. Quest'elemento influenza in parte il testo che lo segue, comportandosi come se ci fosse uno spostamento nel punto 0,0.

Altri problemi derivano dalla gestione degli attributi (font-size, font-family, ...). Molti attributi vengono gestiti molto semplicemente effettuando una traduzione di nomi; alcuni attributi non sono proprio gestiti da vml (font-stretch), altri rivelano problemi imprevisti. Questo è il caso di font-size, apparentemente facile da tradurre, rivela invece dei problemi (risolvibili). Per quest'attributo non basta fare una copia di valore, bisogna anche effettuare un ridimensionamento.

Altro problema (forse senza soluzione) deriva dalle decorazioni (sottolineature, ...) che pur essendo supportate da entrambi i linguaggi vengono gestite un po' diversamente.

Con questa gestione del testo (considerare ogni singola parte di text fra i vari tspan, tref e textpath) la traduzione non viene perfetta ma approssimata perché per posizionare ogni porzione di testo si calcola la lunghezza del testo precedente e si moltiplica per la dimensione del font, ma a seconda delle varie font-family, la dimensione dei singoli caratteri risulta diversa, una i occupa meno spazio di una m, quindi calcolando le lunghezze si aggiunge un valore di aggiustamento (il 10% della stringa), in questo modo, il testo risultate potrà risultare più o meno spaziato ma le frasi dovrebbero essere equamente spaziate e non sovrapporsi.

  • Traduzione: Molto molto complessa (gestione di ogni singolo pezzo di testo, alcune
caratteristiche appaiono intraducibili)

*GESTIONE APPROSSIMATA:

    • Testo con tspan, tref e textpath (diversa gestione degli spazi)
    • Il testo nei path, in svg viene allineato a sinistra, in vml viene centrato nel path. In vml il testo può uscire dal path, in svg no (?)
  • NON FATTI:
    • Gestione valori multipli di x, y (anche dx e dy)
    • Orientamento del teso
    • Definizione di font
    • Tspan, tref complessi (con all'interno altri tspan, tref)
    • Font-stetch: non supportato
  • PROBLEMI: * Textdecoration: non supportato ?

  • NOTA: nella traduzione inversa (vml2svg), potrebbero risultare dei testi tagliati, questo è dovuto all'utilizzo di textpath, che inserisce un testo in un path, quando questo viene tradotto in svg, se il testo risultante esce dal path, la parte che "va fuori" non viene rappresentata. Perché si presenta questo problema? Traducendo i vari font-size (che saranno moltiplicati per i vari valori di width e coordsize) può succedere che nella traduzione inversa il font risulti più grande di un unità, portando a questo problema. Possibili soluzioni:
    • La più semplice consiste nell'accettare questi tagli del testo
    • Se si riuscisse a dire a svg di far uscire il testo dal path non ci sarebbero problemi. Si può?
    • Se si riuscisse a dire a vml di allineare il testo nel path a sinistra (text-align), si potrebbe allungare un po' il testo e risolvere il problema. Textpath non supporta text-align, c'è un altro metodo?
    • Soluzione adottata: aggiungo degli spazi alla fine del testo, in modo che poi saranno loro ad essere troncati mantenendo il testo integro.

Proprietà STROKE e FILL

Le proprietà per definire il tipo di bordo e il riempimento delle figure sono definite da una serie di attributi (stroke, fill, stroke-width, stroke-opacity, fill-opacity, ...). Vml, dal canto suo, gestisce queste caratteristiche definendo due elementi, stroke e fill, che possono essere utilizzati da quasi tutti gli altri elementi. La traduzione non comporta grossi problemi, si riduce ad una conversione di nomi, tuttavia ci sono alcuni intoppi. Innanzi tutto ci sono caratteristiche che sono supportate solo da svg (fill-rule, per specificare il tipo di riempimento in figure definite tramite path, ...). Un altro problema riguarda le dimensioni di stroke (stroke-width), anche qui, come per le dimensioni del testo, copiare lo stesso valore di svg in vml, comporta una modifica della dimensione del bordo, quindi bisogna effettuare dei ridimensionamenti. L'ultimo problema riguarda i valori ereditati (sia per stroke che per fill): se l'elemento è definito all'interno di defs e non presenta proprietà di bordo/riempimento, queste potrebbero essere definite dall'elemento che utilizzerà quest'elemento però non si riesce a fargliele ereditare.

  • Traduzione: semplice (tranne alcuni problemi di difficile risoluzione, valori di default, ereditarietà tramite defs)

Elemento GRADIENT

Questo elemento serve per creare effetti di sfumature tra vari colori. Svg usa un elemento per specificare le proprietà di gradient (inserito in defs), mentre vml utilizza alcuni attributi (nell'elemento fill). Innanzi tutto c'è da sottolineare il fatto che in vml stroke non supporta gradient e quindi non si riesce ad effettuare una conversione. Quindi si può usare il gradiente solo per fill. Anche qui ci sono dei problemi. I gradienti sono di due tipi, lineare e radiale; quello lineare non presenta problemi, mentre per quello radiale (pur essendo supportato da entrambi i linguaggi) presenta delle differenze: svg lo gestisce con cerchi concentrici, mentre vml con rettangoli concentrici. Non sembra che si sia modo per avere lo stesso tipo di gradiente. Ultimo problema, svg permette di specificare un valore di opacità per ogni colore del gradient, vml non lo supporta.

  • Traduzione: semplice (dove è consentita. Stroke non supporta gradient. Differenze di rappresentazione per gradienti radiali)

Attributi di opacità: OPACITY

Nessun problema

Elemento A

Usato per creare link ipertestuali. Conversione banale, basta un cambio di nome.
  • Traduzione: banale.

ELEMENTI NON TRADUCIBILI O NON TRADOTTI

Elemento PATTERN

Permette di specificare degli oggetti da utilizzare come riempimento o come bordo. A differenza di gradient, vml supporta quest'attributo (svg lo tratta come elemento, vml come attributo) anche per stroke. La traduzione sembrerebbe fattibile (basta inserire l'id della figura da visualizzare), ma in realtà sembra non essere supportato, in quanto vml ammette come pattern solo una figura esterna.

  • Traduzione: non sembra fattibile (con pattern interni)

Elemento MARKER Quest'elemento inserisce delle figure (definite tramite path) nei vertici di alcuni elementi (path, line, polyline, polygon). Queste figure possono essere inserite nel punto iniziale, nel punto finale o in tutti i vertici intermedi. La traduzione viene effettuata creando un path (uguale a quello definito da marker) e posizionato opportunamente definendo un gruppo con attributi di posizionamento/dimensionamento opportuni. Per i marker da inserire all'inizio e alla fine del path, non ci sono problemi, quelli da inserire in ogni vertice invece appaiono molto difficili da realizzare (bisogna estrarre dal path ogni singolo vertice, non sembra fattibile). Marker può contenere l'attributo viewBox, questo comporta un ridimensionamento per quanto riguarda il path definito all'interno di quest'elemento. Questo ridimensionamento deve essere rappresentato anche in vml (nell'elemento group), il che comporta dei problemi dovuti alla scelta della scala. Inoltre ci sono alcune caratteristiche di marker che non trovano una corrispondente traduzione in vml (orient, descrive una rotazione del marker, il problema è se ha valore auto, significa che segue l'orientamento del path, senza specificare i gradi di rotazione).

  • Traduzione: un po' complessa (difficile gestione dei vertici interni dei path, non del tutto convincente per quanto riguarda alcune conversioni di scala)

  • NOTA: per il momento non completata in quanto non sembra essere una delle caratteristiche "essenziali" di svg.

Elemento MASKING

Definisce una maschera per comporre oggetti col background. Non sembra traducibile.

Filter Effects: elemento FILTER

Serve per creare complessi effetti grafici, non supportati da vml

Elemento SCRIPT

Non supportato

Elementi di animazione

Non supportati

Elemento FONT

Serve per definire dei font. Non fatta.

-- GianlucaZonta - 09 Dec 2004
to top


You are here: Tesi > ArgomentiDiTesi > VmlConverter > SvgVml

to top

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