SVG-edit permette di disegnare a mano libera, di creare linee sia continue che spezzate, forme di ogni tipo, testi, consente l'importazione e la modifica di immagini raster, ha le funzioni di rotazione, spostamento, allineamento, selezione e raggruppamento. Integra uno zoom, un contagocce per la selezione di colori e permette la conversione delle figure poligonali in percorsi curvilinei (Path).

Supporta i livelli, i gradienti, MathML e l'esportazione sia come SVG che come PNG. Vi è inoltre la possibilità di editare le immagini SVG a livello di codice sorgente. La versione Web è disponibile all'indirizzo
http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html
del seguente collegamento  SVG-edit

L'interfaccia del programma

L'interfaccia di SVG-edit è formata da due zone: l'area centrale occupata dal foglio o canvas e la cornice esterna contenente la barra dei pulsanti (in alto), i tools (a sinistra) e la palette di selezione dei colori (in basso). Sulla destra è nascosto il pannello dei livelli (Layers).

Barra dei pulsanti

La barra dei pulsanti è sensibile al contesto: ciò significa che in base a ciò che è raffigurato sul canvas, saranno visualizzati pulsanti diversi. Quando si visualizza l'applicazione all'inizio nella barra appaiono 5 icone.

Se si inserisce un rettangolo tramite l'icona nei tools e si seleziona, la barra cambia, visualizzando un nuovo set di icone per le relative opzioni di modifica.

La barra dei pulsanti base è formata da 6 icone: menu principale, modifica sorgente, modalità contorno, annulla e rifai. Agendo sull'icona del menu principale si visualizzano le opzioni di apertura, importazione e salvataggio. È possibile importare ed esportare in SVG e l'applicazione supporta anche il formato Web PNG.

Facendo clic sull'icona Proprietà del documento si possono visualizzare e modificare alcune impostazioni come le dimensioni del canvas, scegliere la lingua e il colore di sfondo.

La funzione di modifica sorgente permette di lavorare direttamente sul codice dell'immagine SVG, opportunità molto utile in fase di debugging.

La modalità contorno rende gli oggetti trasparenti in modo che possano essere allineati correttamente senza essere disturbati da colori di sfondi e riempimenti.

La barra dei pulsanti è sensibile al contesto. Inserendo un oggetto sul canvas vengono visualizzati alcuni pulsanti per l'esecuzione di alcune operazioni come la clonazione, l'eliminazione, l'allineamento, l'aggiunta di collegamenti ipertestuali, la rotazione e la sfocatura.

Dopo aver selezionato l'oggetto sul canvas, facendo clic sull'icona raffigurante un timbro, l'oggetto viene clonato.

Agendo sui campi a destra si possono variare l'angolo di rotazione e la sfocatura dell'immagine selezionata.

Per modificare la sfocatura è necessario posizionare il cursore sul relativo slider e trascinarlo a destra per ottenere una sfumatura più intensa.

L'ultima icona sulla destra permette il posizionamento dell'oggetto in base al canvas.

Palette di selezione colori

La palette di selezione colori, che si trova in basso rispetto al canvas, permette la scelta dei colori di contorno e riempimento, la larghezza del tratto e l'opacità. La selezione del colore avviene attraverso una classica palette suddivisa in colori solidi, gradienti lineari e radiali.

Per variare la larghezza del tratto e l'opacità è necessario agire nei due campi successivi.

Barra degli strumenti

Nella parte sinistra dell'interfaccia è presente la barra dei tools o strumenti: selezione, matita, rettangolo, ellisse, percorso, libreria delle forme, testo, immagine, zoom e contagocce.

Il tool di selezione permette la selezione singola o multipla; è possibile poi modificare, ruotare, deformare o ridimensionare l'oggetto selezionato attraverso le apposite maniglie.

La matita permette il disegno a mano libera, che essendo in formato vettoriale può essere modificato senza alcuna perdita di qualità; la linea consente l'inserimento di linee diritte per congiungere due punti, mentre gli strumenti rettangolo e ellisse vengo- no usati per inserire delle forme. Facendo clic sullo strumento rettangolo e tenendo premuto il pulsante del mouse, si attiva un piccolo menu contestuale con diverse opzioni.

La prima icona permette l'inserimento di un rettangolo trascinando il mouse; la seconda inserisce un quadrato perfetto, mentre la terza è uno strumento di riconoscimento forma. Permette di tracciare un rettangolo a mano libera, e la forma verrà riconosciuta e migliorata dall'applicazione.

In modo analogo si può operare con l'ellisse: è possibile inserire un'ellisse trascinando il mouse, inserire un cerchio perfetto, oppure ottenere un miglioramento della forma traccita con lo strumento di riconoscimento forma.

Il tool percorso permette di disegnare dei poligoni, avvalendosi anche di strumenti avanzati come le curve di Béziers.

La libreria delle forme permette l'inserimento di forme predefinite di vario genere, tra cui simboli, frecce, diagrammi, disegni di animali, note musicali, fumetti, ecc.

L'icona per l'inserimento testo, oltre alla possibilità di scrittura, attiva una barra contestuale in alto a destra per la formattazione del testo, con la scelta del font, dello stile, della posizione e dell'allineamento.

Per inserire un'immagine raster è necessario fare clic sull'icona raffigurante una fotografia e inserire la URL, nel Web o locale, dell'immagine.

L'immagine può anche essere trascinata dalla cartella del disco direttamente sul canvas.

Infine l'icona dello zoom permette di aumentare e diminuire la dimensione dell'oggetto da visualizzare. Il contagocce consente di recuperare un colore partendo da un'immagine. E' possibile modificare un oggetto inserito, modificando, oltre ai colori, anche le curve e i nodi che lo compongono. Facendo doppio clic su un oggetto SVG vengono visualizzate le curve di Béziers e i punti di controllo: trascinando i punti, si ottengono gli effetti di deformazione.

Pannello dei livelli

L'organizzazione delle immagini SVG è basata sui livelli, che permettono la separazione di tutti gli oggetti presenti nell'immagine e facilitano lo spostamento o l'eliminazione di un singolo oggetto. Per visualizzare il pannello dei livelli è necessario trascinare l'etichetta Layers a destra.

Dopo aver importato le immagini, per assegnare ad ognuna un livello diverso è necessario: 1. creare un nuovo livello

2. selezionare l'immagine

3. fare clic su Sposta verso e scegliere il livello.

Assegnando ad ogni immagine un livello, risulta facile modificare, spostare, ridimensionare ogni oggetto all'interno del canvas. Selezionando un livello, gli oggetti, non presenti su quel livello, vengono opacizzati.

I livelli possono essere spostati agendo sulle apposite frecce oppure possono essere nascosti facendo clic sull'icona a forma di occhio.