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

Instalación de Netbeans en Ubuntu

Instalación de Netbeans en Ubuntu

Netbeans es uno de los entornos de desarrollo integrado (Integrated Development Environment – IDE)  más conocidos...

Modificar las pestañas de JTabbedPane

Modificar las pestañas de JTabbedPane

En este tutorial veremos lo fácil que es personalizar las pestañas de un JTabbedPane con unas cuantas lineas de código y...

Guardar reporte PDF directamente con Jasperreports

Guardar reporte PDF directamente con Jasperreports

Guardar un reporte PDF creado en iReport no es tan diferente de solo visualizarlo en pantalla. En este ejemplo se hace u...

Creación de GUI con Matlab GUIDE

Creación de GUI con Matlab GUIDE

En este videotutorial se vera la creación de Interfaces Gráficas de Usuario (GUI) utilizando MatLab GUIDE herramienta vi...

Numero a Literal en Java

Numero a Literal en Java

Cuando se realizan trabajos donde se necesita mostrar al cliente un determinado monto de dinero, tipo factura, recibo, c...

Formulario de autenticación circular

Formulario de autenticación circular

En este tutorial crearemos un formulario de logueo de forma circular usando el lenguaje java y el IDE de Netbeans. Neces...

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

En este post veremos un ejemplo sencillo de como descargar desde Internet archivos de cualquier tipo (*.jpg, *.png, *.gi...

FFmpeg es una colección de software libre capaz de decodificar, codificar, transcodificar, mux, demux, transmitir, filtr...

The Age of AI o «La era de la Inteligencia Artificial»,  es una serie de 8 documentales de Youtube Original, presentados...

La comunidad 3D Buzz  era una de los lugares donde la gente curiosa de aprender a realizar videojuegos buscaba recursos...

Herramientas

Generador de Enlaces a Whatsapp