SVG

  • Revision slug: SVG
  • Revision title: SVG
  • Revision id: 338993
  • Created:
  • Creator: Grino
  • Is current revision? No
  • Comment Aggiornato

Revision Content

Iniziare ad usare SVG
Questa esercitazione ti aiuterà ad iniziare ad usare SVG.
Scalable Vector Graphics (SVG) è un linguaggio XML di markup per la descrizione di grafica vettoriale a due dimensioni. Essenzialmente SVG sta alla grafica come XHTML sta al testo.

SVG è simile negli scopi alla tecnologia proprietaria Macromedia Flash di Adobe, ma quello che distingue SVG da Flash l'essere una raccomandazione W3C (vale a dire, uno standard a tutti gli effetti) e che è basato su XML anzichè essere un formato binario proprietario. E' esplicitamente progettato per lavorare con altri standard W3C quali CSS, DOM e SMIL.

Documentazion

Riferimento degli elementi SVG
Ottieni i dettagli di ogni elemento SVG.
Riferimento degli attributi SVG
Ottieni i dettagli di ogni attributo SVG.
Riferimento alle API nel DOM di SVG
Ottieni i dettagli sull'intra API nel DOM di SVG.
Migliora il contenuto HTML
SVG opera insieme ad HTML, CSS e JavaScript. Utilizza SVG per una comune pagna HTML o un'apllicazione web.
SVG in Mozilla
Note e informazioni su come SVG è implementato in Mozilla.

Vedi Tutto...

Comunità

  • Vedi i forum di Mozilla... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}

Strumenti

Animazione e interazione

Come HTML, SVG ha un modello di documento a oggetti (DOM) ed events accessibili via JavaScript. Ciò permette agli sviluppatori di creare ricche immagini animate ed interattive.

Mappe, grafici, giochi ed sperimentazioni  3D

Se un piccolo SVG può fare tanta strada per migliorare il contenuto del web, ecco qualche esempio di uso intensivo di SVG.

{{HTML5ArticleTOC}}SMIL.

Revision Source

<div class="callout-box">
  <strong><a href="https://developer.mozilla.org/en-US/docs/SVG/Tutorial" title="SVG/Tutorial">Iniziare ad usare SVG</a></strong><br />
  Questa esercitazione ti aiuterà ad iniziare ad usare SVG.</div>
<div>
  <b>Scalable Vector Graphics (SVG)</b> è un linguaggio <a href="https://developer.mozilla.org/en-US/docs/XML" title="XML">XML</a> di markup per la descrizione di grafica vettoriale a due dimensioni. Essenzialmente SVG sta alla grafica come <a href="/it/docs/XHTML">XHTML</a> sta al testo.
  <p>SVG è simile negli scopi alla tecnologia proprietaria Macromedia Flash di Adobe, ma quello che distingue SVG da Flash l'essere una <a class="external" href="http://www.w3.org/Graphics/SVG/">raccomandazione W3C</a> (vale a dire, uno standard a tutti gli effetti) e che è basato su XML anzichè essere un formato binario proprietario. E' esplicitamente progettato per lavorare con altri standard <a href="http://www.w3.org/">W3C</a> quali <a href="/it/docs/CSS">CSS</a>, <a href="/it/docs/DOM">DOM</a> e <a class="external" href="http://www.w3.org/AudioVideo/">SMIL</a>.</p>
  <div class="cleared row topicpage-table">
    <div class="section">
      <h2 class="Documentation" id="Documentation">Documentazion</h2>
      <dl>
        <dt>
          <a href="https://developer.mozilla.org/en-US/docs/SVG/Element" title="SVG/Element">Riferimento degli elementi SVG </a></dt>
        <dd>
          Ottieni i dettagli di ogni elemento SVG.</dd>
        <dt>
          <a href="https://developer.mozilla.org/en-US/docs/SVG/Attribute" title="SVG/Attribute">Riferimento degli attributi SVG</a></dt>
        <dd>
          Ottieni i dettagli di ogni attributo SVG.</dd>
        <dt>
          <a href="https://developer.mozilla.org/en-US/docs/Gecko_DOM_Reference#SVG_interfaces" title="Gecko_DOM_Reference#SVG_interfaces">Riferimento alle API nel DOM di SVG</a></dt>
        <dd>
          Ottieni i dettagli sull'intra API nel DOM di SVG.</dd>
        <dt>
          Migliora il contenuto HTML</dt>
        <dd>
          SVG opera insieme ad HTML, CSS e JavaScript. Utilizza SVG per una comune pagna HTML o un'apllicazione web.</dd>
        <dt>
          SVG in Mozilla</dt>
        <dd>
          Note e informazioni su come SVG è implementato in Mozilla.
          <ul>
            <li><a href="https://developer.mozilla.org/en-US/docs/SVG_in_Firefox" title="SVG_in_Firefox">Quanto è implementato SVG in Firefox</a></li>
            <li><a href="https://developer.mozilla.org/en-US/docs/SVG_in_Firefox" title="SVG_in_Firefox">Esercitazione sul come utilizzare </a><a href="https://developer.mozilla.org/en-US/docs/SVG_In_HTML_Introduction" title="SVG_In_HTML_Introduction">SVG in XHTML</a></li>
          </ul>
        </dd>
      </dl>
      <p><span class="alllinks"><a href="https://developer.mozilla.org/en-US/docs/tag/SVG" title="tag/SVG">Vedi Tutto...</a></span></p>
      <h2 class="Community" id="Community">Comunità</h2>
      <ul>
        <li>Vedi i forum di Mozilla... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li>
      </ul>
      <h2 class="Tools" id="Tools">Strumenti</h2>
      <ul>
        <li><a href="http://www.w3.org/Graphics/SVG/Test/">Suite di prova per SVG</a></li>
        <li><a href="http://jiggles.w3.org/svgvalidator/">SVG Validator</a> (Cessato)</li>
        <li><a href="https://developer.mozilla.org/en-US/docs/tag/SVG:Tools" title="tag/SVG:Tools">Ulteriori Strumenti...</a></li>
        <li>Altre risorse: <a href="https://developer.mozilla.org/en-US/docs/XML" title="XML">XML</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS" title="CSS">CSS</a>, <a href="https://developer.mozilla.org/en-US/docs/DOM" title="DOM">DOM</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas</a></li>
      </ul>
    </div>
    <div class="section">
      <h2 class="Related_Topics" id="Examples">Esempi</h2>
      <ul>
        <li>Google <a href="http://maps.google.com">Maps</a> (sovrapposizione del percorso) &amp; <a href="http://docs.google.com">Docs</a> (grafici dei fogli di calcolo)</li>
        <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG menu a bolle</a></li>
        <li><a href="http://jwatt.org/svg/authoring/">Linee guida SVG per autori</a></li>
        <li>Una panoramica del <a href="https://developer.mozilla.org/en-US/docs/Mozilla_SVG_Project" title="Mozilla_SVG_Project">Progetto SVG di Mozilla</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/SVG/FAQ" title="SVG/FAQ">Domande e risposte frequenti</a> su SVG e Mozilla</li>
        <li>Diapositive e dimostrazioni da SVG Open 2009 su <a href="http://jwatt.org/svg-open-US/docs/2009/slides.xhtml" title="http://jwatt.org/svg-open-US/docs/2009/slides.xhtml">SVG e Mozilla</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/SVG/SVG_as_an_Image" title="SVG/SVG as an Image">SVG come immagine</a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/SVG/SVG_animation_with_SMIL" title="SVG/SVG animation with SMIL">Anmazione SVG con SMIL</a></li>
        <li><a href="http://croczilla.com/bits_and_pieces/svg/samples/lion/lion.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/lion/lion.svg">Lion</a>, <a href="http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg">Butterfly</a> &amp; <a href="http://croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg">Tiger</a></li>
        <li><a href="http://plurib.us/1shot/2007/svg_gallery/">Galleria d'arte SVG</a></li>
        <li>Ulteriori esempi (<a href="http://croczilla.com/bits_and_pieces/svg/samples" title="http://croczilla.com/bits_and_pieces/svg/samples">Esempi SVG croczilla.com</a>, <a href="http://www.carto.net/papers/svg/samples/">carto.net</a>)</li>
      </ul>
      <h3>Animazione e interazione</h3>
      <p>Come HTML, SVG ha un modello di documento a oggetti (DOM) ed events accessibili via JavaScript. Ciò permette agli sviluppatori di creare ricche immagini animate ed interattive.</p>
      <ul>
        <li>Alcuni realmente gustosi SVG da <a href="http://svg-wow.org/" title="http://svg-wow.org/">svg-wow.org</a></li>
        <li>Estensione di Firefox (<a href="http://schepers.cc/grafox/">Grafox</a>) per aggiungere un sottoinsieme del supporto per animazioni di SMIL</li>
        <li>Manipolazione interattiva di <a href="http://people.mozilla.com/%7Evladimir/demos/photos.svg">foto</a></li>
        <li><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">Trasformazioni HTML</a> utilizzando <code>foreignObject</code> di SVG</li>
        <li><a href="http://lab.vodafone.com/vienna/">Arte animata</a></li>
      </ul>
      <h3>Mappe, grafici, giochi ed sperimentazioni&nbsp; 3D</h3>
      <p>Se un piccolo SVG può fare tanta strada per migliorare il contenuto del web, ecco qualche esempio di uso intensivo di SVG.</p>
      <ul>
        <li><a href="http://www.codedread.com/yastframe.php">Un Tetris SVG</a> &amp; <a href="http://www.treebuilder.de/svg/connect4.svg">Connect 4</a></li>
        <li><a href="http://files.myopera.com/orinoco/svg/USStates.svg">Gioco Find the State</a></li>
        <li><a href="http://www.carto.net/papers/svg/us_population/index.html">Mappa della popolazione degli US</a></li>
        <li><a href="http://www.treebuilder.de/default.asp?file=441875.xml">Scatola 3D</a> e <a href="http://www.treebuilder.de/default.asp?file=206524.xml">Scatole 3D</a></li>
        <li><a href="http://jvectormap.com/" title="http://jvectormap.com/">jVectorMap</a> (mappe interattive per la visualizzazione dati)</li>
      </ul>
    </div>
  </div>
  <div>
    {{HTML5ArticleTOC}}<a href="http://www.w3.org/AudioVideo/">SMIL</a>.</div>
</div>
<p><!-- Interwiki Language Links --></p>
Revert to this revision