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

PanoramaImageView: Vista panorámica

PanoramaImageView: Vista panorámica

En este post haremos uso de PanoramaImageView para agregar a una aplicación android, una vista panorámica de 180° y 360°...

Gráfico de columnas con iReport

Gráfico de columnas con iReport

El gráfico de columnas es uno  tipo de gráfico que nos permite representar fácilmente la cantidad de veces que ocurre un...

Bloquear orientación de la pantalla

Bloquear orientación de la pantalla

Cuando escribimos aplicaciones para android debemos tener cuidado al diseñar la interfaz en la posición que tomaran los...

Introducción a Scene Builder y MVC (Parte I)

Introducción a Scene Builder y MVC (Parte I)

En este tutorial realizaremos una introducción al diseño de interfaces gráficas en JavaFX y Scene Builder, así también v...

Mapas interactivos – El proyecto – Parte 2

Mapas interactivos – El proyecto – Parte 2

Comenzando este tutorial, primero necesitamos definir la “estructura” de nuestro proyecto. Haremos uso del I...

Gestión de Stock – La Vista (Parte 3)

Gestión de Stock – La Vista (Parte 3)

En esta tercera parte del tutorial crearemos la interfaz de usuario GUI (VISTA) para el sistema de gestión de stock. Tom...

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

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

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

MyBatis es un framework de persistencia Java que se encarga de mapear sentencias SQL y procedimientos almacenados a part...

Webcam Capture es un API  que permite usar una cámara web incorporada o externa directamente desde código Java utilizand...

im4java es una interfaz pura de Java para la línea de comandos de ImageMagick. La interfaz de la línea de comandos de IM...

En un post anterior conocimos una herramienta Open Source con un conjunto de herramientas para el trabajo con imágenes e...

Herramientas

Generador de Enlaces a Whatsapp