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«
Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.
Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye
Enjoy! :)
La Ordenación de burbuja (Bubble Sort en inglés) es un sencillo algoritmo de ordenamiento. Este algoritmo es esencialmen...
Si te gusta realizar tus propios memes o foto montajes pero tienes poca o nula experiencia en editores gráficos como Pho...
El componente swing JLabel nos permite cargar una imagen con la propiedad setIcon, sin embargo la imagen no toma el tama...
Antes de programar un videojuego, es necesario saber: Cómo representar figuras en la pantalla Cómo se manejan las coorde...
La clase hashMap es muy util para almacenar objetos de la forma ( Clave, Objeto ), donde Clave es un identificador único...
¿Qué es Maven? Maven es una herramienta de software para la gestión y construcción de proyectos Java. Provee un conjunto...
Los comentarios estan cerrados
Si trabajas con redes sociales (RRSS) a continuación te muestro tres herramintas gratuitas que te ayudaran a la hora de...
Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...
En este post, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...
Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...
Excelente artículo, me gusta pasar el rato leyendo un buen post.