Estructura Interna de un archivo SVG.
<?xml version="1.0" encoding="UTF-8"?> <!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" width="10px" height="10px"> <!-- Comentario --> ... </svg>
SVG tiene una estuctura XML, en la primera linea se declara esta colocando tambien la codifición UTF óISO, el contenido de la imagen vectorial esta dentro las etiquetas SVG, ahí tambien se especifica el tamaño de la imagen, para colocar comentarios se utilizan los signos <!– comentario –>, al utilzar XML todo etiqueta que se abre debe cerrarse.
Sistema de Coordenadas.
Cuando colocamos las dimensiones de la imagen en la etiqueta SVG la imagen vectorial forma un plano donde las coordenas X,Y se encuentran en la parte superior izquierda (0,0)
0,0 ....................... ....................... ....................... A ....................... L ....................... T ....................... O ....................... ....................... ....................... ANCHO
Figuras Geometricas.
La Linea <line>
x1,y1 = Coordenadas iniciales
x2,y2 = Coordenadas finales
stroke: Color de la linea
stroke-width = Grosor de linea
stroke-dasharray = Es un array que especifica alternadamente el grosor de la linea pintada y el espacio vacio
<svg xmlns="http://www.w3.org/2000/svg" height="200" width="235"> <line x1="10" y1="10" x2="200" y2="200" stroke="red" stroke-width="2px" /> <line x1="20" y1="10" x2="210" y2="200" stroke="yellow" stroke-width="2px" /> <line x1="30" y1="10" x2="220" y2="200" stroke="green" stroke-width="2px" /> <!-- Linea con estilo segmentado --> <line x1="40" y1="10" x2="230" y2="200" stroke="black" stroke-width="5px" stroke-dasharray="30, 10, 20, 5" /> </svg>
Rectángulo <rect>
x,y = Coordenas de la esquina superior izquierda del rectangulo
width, height = Ancho y Alto de la figura
fill: Color de relleno
<svg xmlns="http://www.w3.org/2000/svg" height="160" width="160"> <rect x="0" y="0" width="100" height="100" fill="#FF0000" /> <rect x="30" y="30" width="100" height="100" fill="#F6FF00" /> <rect x="60" y="60" width="100" height="100" fill="#008403" /> </svg>
Tambien puede crearse rectangulos con esquinas redondeadas y semitransparente
rx, ry = valor para redondear las esquinas
opacity: Valor de opacidad donde 0 es transparente y 1 es opaco
<svg xmlns="http://www.w3.org/2000/svg" height="150" width="150"> <rect x="5" y="5" width="100" height="100" fill="#FF0000" rx="10" ry="10" /> <rect x="50" y="50" width="100" height="100" fill="#008403" rx="15" ry="60" opacity="0.5" /> </svg>
Círculo <circle>
cx, cy = coordenadas del centro del circulo
fill: color de relleno
stroke: color de linea
stroke-widht: grosor de linea
<svg xmlns="http://www.w3.org/2000/svg" height="120" width="120"> <circle cx="60px" cy="60px" r="50px" style="fill:#F6FF00; stroke:#008403; stroke-width:5px;" /> </svg>
Elipse <ellipse>
cx,cy = Coordenas del centro de la imagen
rx, ry = Radio horizontal y vertical
<svg xmlns="http://www.w3.org/2000/svg" height="120" width="220"> <ellipse cx="110" cy="60" rx="100" ry="50" style="fill:#FF0000; stroke:#F6FF00; stroke-width:5px;" /> </svg>
Polígonos <polygon>
points: Array de puntos que definen la imagen «x1,y1,x2,y2,x3,y3………….xn,yn»
transform=»translate(x,y)» = cambia la posicion de la imagena a nuevas coordenas, valido tambien para anteriores figuras.
<svg xmlns="http://www.w3.org/2000/svg" height="140" width="140"> <polygon points="30,0,90,0,90,30,120,30,120,90,90,90,90,120,30,120,30,90,0,90,0,30,30,30" style="stroke:black; stroke-width:2px; stroke-opacity:1; fill:#FF0000; fill-opacity:1" transform="translate(10,10)" /> </svg>
multi-lineas <polyline>
Dibuja una serie de lineas conectadas
points: Array de puntos que definen las lineas «x1,y1,x2,y2,x3,y3………….xn,yn»
<svg xmlns="http://www.w3.org/2000/svg" height="50" width="70"> <!-- J --> <polyline points="0,20,0,30,20,30,20,0" style="stroke:black; stroke-width:2px; fill:none;" transform="translate(10,10)" /> <!-- C --> <polyline points="50,0,30,0,30,30,50,30" style="stroke:black; stroke-width:2px; fill:none;" transform="translate(10,10)" /> </svg>
Texto <text>
x,y = Coordenas del texto
dx,dy = indica las coordenas del texto tomando como punto de partida las coordenas x,y
rotat = array de números que indica la rotación de cada letra, por defecto es cero
style: permite especificar el estilo del texto
tambien puede utilizarse etiquetas individuales para cada atributo como por ejemplo font-size=»valor»
<svg xmlns="http://www.w3.org/2000/svg" height="140" width="360"> <text x = "10" y="100" dx = "10" dy="5" rotate="20 2 30 8 10 0 35 7" style="font-size:69px; font-weight:bold; font-family='sans-serif'; fill:#FF0000; stroke:black; stroke-width:0.9;"> Problem? </text> <text x="30" y="130" fill="green" font-family="Arial" font-size="12" > forever allone </text> </svg>
continuara…
Bajate los archivos creados en este tutorial de este enlace «SVG-files«
En posts anteriores hablamos sobre los metadatos y el porque son importantes en la Seguridad Informática, vimos el manej[...]
1. En la ventana de comandos de matlab escribe «mbuild -setup«, sin comillas y presiona enter. >> mbuild -setup We[...]
El Método de Sustitución Directa básicamente consiste en asumir un valor, reemplazar el mismo en la función despejada y[...]
El gráfico de columnas es uno tipo de gráfico que nos permite representar fácilmente la cantidad de veces que ocurre un[...]
ADO.NET proporciona un puente entre los objetos creados en VB o C# y la base de datos MySQL asociada a la aplicación, a[...]
En este post te enseñamos a crear tus imagenes al estilo de Disney Pixar utilizando Inteligencia Artificial de una maner[...]
