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! :)
Continuando con el desarrollo de la aplicación (Parte 1), abrimos Netbeans y creamos un nuevo proyecto al que llamaremos...
En este post crearemos un componente gráfico para java que nos permitirá seleccionar la hora del día de una manera senci...
Java Printing nos permite hacer uso de las impresoras del sistema para, valga la redundancia 🙂 imprimir los gráficos de...
Cuando tenemos nuestra aplicación android terminada, lo siguiente es distribuirla ya sea en el Google Play o independien...
Java Excel API es un API para java que permite a los desarrolladores leer y escribir en hojas de cálculo Excel. jexcelap...
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...
Los comentarios estan cerrados
El gigante tecnologico Google a puesto un bonito Doodle en su buscador que esta fascinando a sus millones de usuarios qu...
WhatsApp anuncio a través de su blog que ya se encuentra disponible la función de envío de fotos y videos TEMPORALES, es...
Muchas de las innovaciones computacionales de la NASA se desarrollaron para ayudar a explorar el espacio, pero ahora la...
TikTok es una plataforma de microvideos muy popular entre los jóvenes el cual cuenta ya con millones de videos cortps de...
Excelente artículo, me gusta pasar el rato leyendo un buen post.