Un ejemplo de SVG

SVG se escribe en XML.

Ejemplo SVG

El siguiente ejemplo es un ejemplo de archivo SVG simple. Los archivos SVG deben guardarse con la extensión .svg:

<?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="red"/>
</svg>

Ver ejemplo (solo para navegadores que soportan SVG)

(Para ver el código fuente de SVG, abra este ejemplo, luego haga clic derecho en la ventana. Seleccione "Ver código fuente".)

Explicación del código:

La primera línea contiene la declaración XML. ¡Tenga en cuenta la propiedad standalone! Esta propiedad especifica si este archivo SVG es "independiente" o contiene referencias a archivos externos.

standalone="no" significa que el documento SVG referenciará un archivo externo - aquí, es el archivo DTD.

Las segunda y tercera líneas hacen referencia a este DTD de SVG externo. Este DTD se encuentra en “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”. Este DTD se encuentra en W3C y contiene todos los elementos SVG permitidos.

El código SVG comienza con el elemento <svg>, que incluye la etiqueta de apertura <svg> y la etiqueta de cierre </svg>. Este es el elemento raíz. Las propiedades width y height pueden establecer el ancho y la altura de este documento SVG. La propiedad version puede definir la versión de SVG utilizada, y la propiedad xmlns define el espacio de nombres SVG.

El <circle> de SVG se utiliza para crear un círculo. Las propiedades cx y cy definen las coordenadas x e y del centro del círculo. Si se ignoran estas propiedades, el punto se establecerá en (0, 0). La propiedad r define el radio del círculo.

Las propiedades stroke y stroke-width controlan cómo se muestra el contorno de la forma. Establecemos el contorno del círculo en 2px de ancho, con borde negro.

La propiedad fill establece el color dentro de la forma. Establecemos el color de relleno en rojo.

El propósito de las etiquetas de cierre es cerrar elementos SVG y el documento en sí.

Notas:¡Todos los etiquetas de apertura deben tener etiquetas de cierre!