Scalable Vector Graphic (SVG) file sono un metodo alternativo di visualizzare elementi grafici all'interno di un browser web. SVG è utilizzato per visualizzare gli elementi grafici che non perdono la loro qualità quando ingrandita o ridimensionata o visualizzati su schermi con risoluzioni diverse. Icone, banner e loghi del sito Web di alta qualità possono essere create e visualizzati utilizzando la tecnologia SVG.
Istruzioni
Preparare l'ambiente di Test
1
Pulsante destro del mouse sul desktop del sistema operativo. Dal menu a comparsa, selezionare "Nuova cartella" o "Crea nuova cartella" dall'elenco delle opzioni.
2
Inserire il nome "Cartella di prova in formato SVG" nel campo di testo che è stato messo a fuoco nel passaggio precedente.
3
Fare clic su un'area di fuori del campo di testo per salvare il nome della cartella appena creata. Una cartella con il nome "Cartella di prova in formato SVG" è ora presente sul desktop.
4
Avviare l'applicazione di editor di testo nativa che viene fornito con il sistema operativo. Per Windows, avviare "Blocco note" e su Mac OSX, utilizzare "TextEdit". Per le distribuzioni di Linux, scegliere da entrambi "Gedit". "Pico", "vi" o "Emacs."
Creare documento HTML
5
Individuare il documento nuovo e vuoto che è stato creato dall'applicazione editor di testo nativa. Se nessuno è stato creato automaticamente, selezionare "File" e poi selezionare "New" o "Nuovo documento" dall'elenco delle opzioni che viene visualizzata.
6
Fare clic all'interno della finestra di immissione di testo nel nuovo documento.
7
Evidenziare il codice riportato di seguito (tra cui "Inizia qui" e "End Here"):
<! - iniziare qui-- >
< html >
<head>
<title>Using SVG inside HTML</title>
<style>
body {
margin:50px 0px; padding:0px;
text-align:center;
}
div#content {
width:500px;
margin:0px auto;
text-align:center;
padding:15px;
border:1px solid #ccc;
background-color:#fafafa;
}
embed#S{
margin:10px 0px 10px 75px;
}
</style>
</head>
<body>
<div id='content'>
<h1>Using SVG inside HTML</h1>
<embed id="S" and "C" simultaneously to copy the highlighted code to the operating system's clipboard. If using Mac OSX, press "Cmd" and "C" simultaneously instead of "Ctrl" and "C." This alternative action also copies the highlighted code to the operating system's clipboard.
9
Click "File"-->"Save As."
10
Navigate to the desktop using the explorer window in the dialog box that appears.
11
Navigate and select "SVG Test Folder" using the file explorer window that contains the list of files that are located on the desktop.
12
Locate the "Save As" text field and enter "SVG.html."
13
Press "OK" when complete. A new document called "SVG.html" should now be located in the "SVG Test Folder," which is on the desktop.
14
Verify that the "Save As" dialog box has disappeared.
Create SVG Document
15
Click on the native text editor application window to bring the application back into focus.
16
Navigate to "File." Select "New" or "New Document" from the list of options that appear.
17
Highlight the following code (including "Start Here" and "End Here"):
<!--Start Here-->
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="blue"/>
</svg>
<!--End Here-->
18
Press "Ctrl" and "C" simultaneously to copy the highlighted code to the operating system's clipboard. If using Mac OSX, press "Cmd" and "C" simultaneously instead of "Ctrl" and "C." This alternative action also copies the highlighted code to the operating system's clipboard.
19
Click "File"-->"Save As."
20
Navigate to the desktop using the file explorer window in the dialog box that appears.
21
Navigate and select "SVG Test Folder" using the file explorer window that contains the list of files that are located on the desktop.
22
Locate the "Save As" text field and enter "circles.svg."
23
Press "OK" when complete to commit the save. A new document called "circles.svg" is now located in the SVG Test Folder, which is on the desktop.
24
Verify that the "Save As" dialog box has disappeared.
Test Files
25
Minimize the two open documents, "circles.svg" and "SVG.html," so that the desktop is clearly visible.
26
Double-click on the folder "SVG Test Folder." A new file explorer window appears.
27
Right-click on the file named "SVG.html" and navigate to "Open With." Select an SVG-compatible browser from the list of applications that appear. Consult the "Tips" section of this how-to for more information.
28
Wait for the SVG compatible web browser to start and render "SVG.html." A new browser window appears.
29
Verify that a blue circle with a black outline is shown in the middle of the browser window. This indicates the task has been successfully completed.
Tips & Warnings
If the example is not working try viewing the 'svg.html' document in a different browser. Not all browsers are compatible with SVG.Many versions of the native web browser application that comes with the Windows operating system, Internet Explorer, do not render SVG. Install a SVG-compatible web browser in order to complete this example. Firefox, Chrome, and Opera are browsers that provide support for scalable vector graphics.Double-check that both the svg.html and the circle.svg files are stored in the same folder -- SVG Test Folder on the desktop.