Aprende Java Aprende Php Aprende C++ Aprende HTML 5 Aprende JavaScript Aprende JSON Aprende MySQL Aprende SQLServer Aprende Visual Basic 6 Aprende PostgreSQL Aprende SQLite Aprende Redis Aprende Kotlin Aprende XML Aprende Linux VSC Aprende Wordpress Aprende Laravel Aprende VueJS Aprende JQuery Aprende Bootstrap Aprende Netbeans Aprende Android
Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube Sigueme en TikTok Sigueme en Whatsapp
Home / Desarrollo Web / Tutorial Gráficos Vectoriales SVG – Parte I

Tutorial Gráficos Vectoriales SVG – Parte I

Por 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

Artículos similares

Personalización de Componentes Swing Java I

Hace tiempo pidieron un video tutorial sobre como crear sus propios componentes swing java, lamentablemente debo decir q[...]

Bloquear pantalla cliente

En este tutorial crearemos una aplicación que bloqueara toda la pantalla de la PC y no nos dejara realizar ninguna tarea[...]

Creación de mapas con shapes – Parte 3

En nuestro mapa interactivo, se hará uso de un mapa departamental dividido en provincias, todo a través  de shapes, si b[...]

Exportar registros MySQL a Excel

Java Excel API es un API para java que permite a los desarrolladores leer y escribir en hojas de cálculo Excel. jexcelap[...]

Fondos animados en CSS para tus apps web

¿Estas buscando fondos animados para tus sitios web? Animated BG es un sitio web donde puedes encontrar cientos de fondo[...]

Node.js: Instalación, configuración y Hola Mundo

No se puede negar la popularidad que ganaron las aplicaciones de JavaScript en los últimos años, y las bibliotecas dispo[...]