Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Desarrollo Web / Tutorial Gráficos Vectoriales SVG – Parte I

Tutorial Gráficos Vectoriales SVG – Parte I

Autor jc mouse viernes, febrero 24, 2012

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>

line

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>

rect 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>

bordes redondeados

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>

círculo vectorial

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>

elipse vectorial

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>

cruz roja

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>

multi lineas

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>

texto vectorial

continuara…

Bajate los archivos creados en este tutorial de este enlace “SVG-files

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

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! :)

También Te Podría Interesar

Reporte Padrón electoral con imágenes y Data Matrix

Reporte Padrón electoral con imágenes y Data Matrix

En este post diseñaremos un reporte de un padrón electoral con dos columnas que contendrá los certificados de sufragio e...

Crear componente Switch de Android para Java Swing

Crear componente Switch de Android para Java Swing

En este post crearemos un componente que solo hay en android y que no esta disponible en la paleta de controles de Netbe...

Informes Access con JasperReport/iReport

Informes Access con JasperReport/iReport

En este post vemos la forma de conectar una base de datos Access con JasperReport para diseñar y ejecutar reportes. Para...

Generador de números aleatorios UNIX

Generador de números aleatorios UNIX

El Método Congruencial Lineal Mixto es el más utilizado en simulación en computadoras digitales y esta basado en una rel...

Primeros pasos con JavaFX

Primeros pasos con JavaFX

¿Qué es javaFX? JavaFX es una familia de productos y tecnologías de Sun Microsystems, adquirida por Oracle Corporation,...

Imprimir Swing

Imprimir Swing

Java Printing nos permite hacer uso de las impresoras del sistema para, valga la redundancia 🙂 imprimir los gráficos de...

1 comentario en “Tutorial Gráficos Vectoriales SVG – Parte I”

  1. Excelente artículo, me gusta pasar el rato leyendo un buen post.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Comparte lo que sabes

Categorias

Últimas entradas

PHPUnit es un framework que se utiliza para escribir tests en PHP, Netbeans nos permite configurarlo y usarlo fácilmente...

Una Prueba Unitaria, es una forma de comprobar que nuestro código, hace lo que se supone debe hacer; es decir, se asegur...

La prueba del camino básico, es una prueba de “caja blanca” que consiste en verificar el código de nuestros...

Si quieres cambiar el nombre de tus atributos sin tener que reescribir código java por X o Y razón, GSON te permite reno...

Android Bolivia

Bandera en Alto