1 files changed, 50 insertions, 0 deletions
diff --git a/files/it/web/svg/applying_svg_effects_to_html_content/index.html b/files/it/web/svg/applying_svg_effects_to_html_content/index.html
new file mode 100644
index 0000000000..b277a2fc86
--- /dev/null
+++ b/files/it/web/svg/applying_svg_effects_to_html_content/index.html
@@ -0,0 +1,50 @@
+---
+title: Introduzione a SVG dentro XHTML
+slug: Introduzione_a_SVG_dentro_XHTML
+translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content
+---
+<p> </p>
+<h3 id="Panoramica" name="Panoramica">Panoramica</h3>
+<p>Questo articolo e l'esempio allegato mostrano come utilizzare <a href="it/SVG">SVG</a> per inserire un'immagine di sfondo in un form. Mostra come <a href="it/JavaScript">JavaScript</a> e i <a href="it/CSS">CSS</a> possano essere utilizzati per manipolare l'immagine allo stesso modo in cui manipolano un normale elemento <a href="it/XHTML">XHTML</a>. Si noti che l'esempio funziona sui browser che supportano XHTML (non solo <a href="it/HTML">HTML</a>) e l'integrazione di SVG.</p>
+<p>Ecco il codice dell' <a class="external" href="http://developer.mozilla.org/presentations/xtech2005/svg-canvas/SVGDemo.xml">esempio</a>:</p>
+<pre>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
+&lt;head&gt;
+  &lt;title&gt;XTech SVG Demo&lt;/title&gt;
+  &lt;style&gt;
+    stop.begin { stop-color:yellow; }
+    stop.end { stop-color:green; }
+    body.invalid stop.end { stop-color:red; }
+    #err { display:none; }
+    body.invalid #err { display:inline; }
+  &lt;/style&gt;
+  &lt;script&gt;
+    function signalError() {
+      document.getElementById('body').setAttribute("class", "invalid");
+    }
+  &lt;/script&gt;
+&lt;/head&gt;
+&lt;body id="body"
+   style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"&gt;
+  &lt;form&gt;
+     &lt;fieldset&gt;
+       &lt;legend&gt;HTML Form&lt;/legend&gt;
+       &lt;p&gt;&lt;label&gt;Enter something:&lt;/label&gt;
+          &lt;input type="text"/&gt;
+          &lt;span id="err"&gt;Incorrect value!&lt;/span&gt;&lt;/p&gt;
+       &lt;p&gt;&lt;button onclick="signalError();"&gt;Activate!&lt;/button&gt;&lt;/p&gt;
+     &lt;/fieldset&gt;
+  &lt;/form&gt;
+  &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+    viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
+    style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"&gt;
+    &lt;linearGradient id="gradient"&gt;
+      &lt;stop class="begin" offset="0%"/&gt;
+      &lt;stop class="end" offset="100%"/&gt;
+    &lt;/linearGradient&gt;
+    &lt;rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /&gt;
+    &lt;circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /&gt;
+  &lt;/svg&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+<h3 id="Spiegazione" name="Spiegazione">Spiegazione</h3>
+<p>Questa pagina è principalmente normale XHTML, CSS e JavaScript. L'unica parte interessante è l'elemento &lt;svg&gt;. Questo elemento e i suoi figli sono dichiarati nel namespace di SVG.</p>