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 este post iremos conociendo de un modo práctico que es y como se utiliza un Array en java, para esto partiremos de un[...]
En este post construiremos un Servicio Web en Java bajo el estandar REST (Representational State Transfer), el cual hace[...]
Continuando con estos post de Cliente/Servidor, en esta oportunidad realizaremos un ejemplo usando un dispositivo móvil[...]
JSON es un formato de texto ligero para el intercambio de datos ampliamente usado en los Servicios Web. En este post uti[...]
ImageMagick es un software de código abierto multiplataforma que contiene una serie de herramientas para leer, mostrar,[...]
Para conectar Visual Basic .NET con una base de datos de MS Access se utiliza la libreria «System.Data.OleDb» en el sigu[...]
