Estructura básica para un SVG

La estructura básica para un svg es la siguiente

< xmlns="http://www.w3.org/2000/svg" height="400" width="500" viewbox="0 0 150 150">
< /svg>

donde
*xmlns: es un estandar del XML que identifica un namespace XML.
*viewBox: especifica como el conjunto de gráficos debe estirarse para caber en un elemento contenedor.
*width: indica el ancho del svg.
*height: indica el alto del svg.

Algunos elementos útiles

+El elemento g
ejemplo:
< g >
< id="Grupo1" transform="skewY(10) scale(2)" opacity="0.3">
< fill="red" height="10" width="10" y="50" x="5">
< fill="green" height="10" width="10" y="50" x="15">
< /g>

*Aquí definimos un grupo de identificador Grupo1 en donde se definen 2 rectángulos y se ven afectados por los atributos opacity y transform.

+El elemento defs
ejemplo:

< defs >
< lineargradient id="Gradient01">
< color="#39F" offset="20%">
< color="#F3F" offset="90%">
< /lineargradient>
< /defs>
...
< rect fill="url(#Gradient01)" height="10" width="10" y="100" x="30">

*Donde dentro de defs se define un gradiente que luego puede ser usado en otro elemento. En este caso se utiliza para un rectángulo.

+Elemento Symbol y Use
Ejemplo:

< defs >
< symbol id="MySymbol" viewbox="0 0 20 20">
< height="8" width="8" y="1" x="1">
< height="8" width="8" y="1" x="11">
< /symbol>
< /defs>
...
< use height="15" width="15" y="500" x="500" href="#Simbolo1">

*Con el elemento Symbol se pueden definir algunos gráficos básicos y reutilizarlos en otra ubicación haciendo referencia de ellos a través del elemento use.

Ejemplo utilizando estos elementos:
=========================

< svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180" version="1.1" width="500" height="400">

< defs >
< symbol id="Simbolo1" viewBox="0 0 20 20">
< desc >MySymbol - four rectangles in a grid< /desc>
< rect x="1" y="1" width="8" height="8" / >
< rect x="11" y="1" width="8" height="8" / >
< rect x="1" y="11" width="8" height="8" / >
< rect x="11" y="11" width="8" height="8" / >
< / symbol>
< linearGradient id="Gradient01">
< stop offset="20%" stop-color="#39F" / >
< stop offset="90%" stop-color="#F3F" / >
< / linearGradient >
< /defs >

< g id="Grupo1" opacity="0.3" transform="skewY(10) scale(2)" >
< rect x="5" y="50" width="10" height="10" fill="red" />
< rect x="15" y="50" width="10" height="10" fill="green" />
< / g>


< rect x="30" y="100" width="10" height="10" fill="url(#Gradient01)" / >
< rect x="40" y="100" width="10" height="10" fill="green" / >

< rect x="10" y="10" width="90" height="20" fill="none" stroke="blue" stroke-width="0.3" / >


< use x="45" y="15" width="15" height="15" xlink:href="#Simbolo1" / >
< use x="45" y="35" width="15" height="15" transform="translate(45,0) rotate(45)" xlink:href="#Simbolo1" / >

< / svg >

*Copia y pega este código en un Notepad y guárdalo con la extensión de svg. Si no puedes ver el gráfico necesitas instalar el visualizador de Adobe