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

Como crear salas de videollamadas con Messenger Rooms de Facebook

Como crear salas de videollamadas con Messenger Rooms de Facebook

Messenger Rooms es la nueva opción de videoconferencias de Facebook que permite realizar videollamadas con hasta 50 pers...

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

Hola Mundo con Firebase

Hola Mundo con Firebase

Firebase es la plataforma para el desarrollo de aplicaciones web y aplicaciones móviles de Google el cual se centra en e...

Decompilar archivos APK

Decompilar archivos APK

Las aplicaciones para celulares inteligentes con sistema operativo Android, se distribuyen en archivos *.APK, si como pr...

Gestión de Stock (Parte 2)

Gestión de Stock (Parte 2)

Continuando con el desarrollo de la aplicación (Parte 1), abrimos Netbeans y creamos un nuevo proyecto al que llamaremos...

Manipular colecciones de una forma sencilla

Manipular colecciones de una forma sencilla

Java proporciona Collection Framework, que define varias clases e interfaces para representar un grupo de objetos como u...

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 crearemos un botón swing que reproducirá un sonido cuando este sea presionado por el usuario.  Sin mas que...

Muchas veces necesitamos de fotos para adornar nuestros perfiles en RRSS pero no queremos subir nuestras propias fotos p...

En esta ocasión aprenderemos a conectaros con una base de datos Oracle desde Laravel. Es un tutorial sencillo y cortito,...

En este tutorial conoceremos una forma de conectar una aplicación en Laravel con tres bases de datos diferentes, 2 en My...

Herramientas

Generador de Enlaces a Whatsapp