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«
MyBatis es un framework de persistencia Java que se encarga de mapear sentencias SQL y procedimientos almacenados a part[...]
Nivel: Intermedio-Avanzado IDE: Netbeans 6.9 o Sup. Tiempo: 30 minutos En este tutorial crearemos una aplicación que nos[...]
En este post crearemos un botón swing que reproducirá un sonido cuando este sea presionado por el usuario. Sin mas[...]
Una procedimiento almacenado es un conjunto de sentencias de SQL que se pueden almacenar en el servidor, de esta forma n[...]
🙂 Una de las preguntas más buscadas por programadores java es la de crear componentes swing en tiempo de ejecución, eso[...]
La misión espacial de la NASA, el Mars 2020 Rover Mission esta proyectada para lanzarse en julio de 2020 y su llegada s[...]
