Latest web development tutorials

ejemplos de SVG

Ejemplos simples SVG

Un simple ejemplo gráfico SVG:

Aquí está el archivo SVG (guardado con el archivo SVG SVG extensión):

<?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 xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>

análisis de código SVG:

La primera línea contiene la declaración XML. Tenga en cuenta que la propiedad independiente! Este atributo especifica si el archivo SVG "está solo", o contiene una referencia a un archivo externo.

standalone = "no" significa que el documento SVG tiene una referencia a un archivo externo - en este caso, la DTD.

La segunda y tercera línea hace referencia a la DTD externa SVG. La DTD se encuentra en "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". La DTD se encuentra W3C, que contiene todos los elementos SVG permisibles.

código SVG <svg> inicio elemento, incluida la desactivación de la etiqueta <svg> y la etiqueta de cierre </ svg>. Este es el elemento raíz. anchura y altura atributos pueden establecer la anchura y altura de este documento SVG. atributo de versión define la versión SVG utilizado, xmlns atributo define el espacio de nombres SVG.

El SVG <círculo> se utiliza para crear un círculo. cx y cy atributos definen el centro del círculo coordenadas x e y. Si ignora estas dos propiedades, a continuación, el punto se establece en (0, 0). r atributo define el radio del círculo.

accidente cerebrovascular y atributo de trazo de anchura controla el modo en el contorno de la forma. Nos contorno del círculo es del 2px fronteras de ancho, de color negro.

llenar la propiedad de color se encuentra dentro de la forma. Hemos establecido el color de relleno a rojo.

Etiqueta de cierre cierra el elemento SVG raíz y el propio documento.

Nota: Todas las etiquetas de apertura deben tener etiquetas de cierre!