El elemento rect nos permite en SVG la creación de rectángulos. Posicionándolos en un eje de coordenadas mediante las propiedades x,y. Además del posicionamiento las otras dos propiedades que definen el rectángulo son su alto y ancho.
Todos los valores son susceptibles de ser modificados por una animación.
El elemento para crear rectángulos rect nos quedaría de la siguiente forma:
<rect x="coordenada" y="coordenada" height="longitud" width="longitud">
Una de las posibilidades del rectángulo es la de redondear sus esquinas. Para ello hay que modificar sus atributos rx y ry.
En el caso de que falte uno de los dos valores, el omitido tomará el valor del otro. Es decir, si no especificamos el valor de ry y si el de rx, entonces ry tomará el valor de rx y viceversa.
Por otro lado, si el valor de rx y ry son mayores que la mitad del ancho y alto del rectángulo Estos quedarán reducidos al valor de la mitad del ancho y del alto.
Así tendríamos el elemento para crear rectángulos rect con dos nuevos valores:
<rect x="coordenada" y="coordenada" height="longitud" width="longitud" rx="longitud" ry="longitud"/>
Las técnicas de coloreado, bordes, opacidad,… son genéricas para todas las formas básicas (Shapes).
]]>polygon.
Para poder crear un polígono en SVG simplemente tendremos que ir identificando la secuencia de puntos que forman sus vértices. Los puntos son identificados mediante el atributo points el cual recibirá como valores una lista de puntos separados por comas.
Así, el elemento polygon nos quedaría de la siguiente forma:
<polygon points="lista de puntos"/>
Las técnicas de coloreado, bordes, opacidad,… son genéricas para todas las formas básicas (Shapes).
Definir la lista de puntos tiene su intríngulis ya que tenemos una gramática a aplicar. En este caso la gramática es Backus-Naur Form (BNF). También aplicable a los puntos de polyline.
Dentro de la notación nos encontramos los siguientes elementos
| alternativas de separación. |
Ahora, que lo más normal es que nos encontremos coordenadas numéricas separadas por comas. Por ejemplo, veamos el caso que nos ofrece la especificación SVG para una estrella:
<polygon fill="red" stroke="blue" stroke-width="10"
points="350,75 379,161 469,161 397,215
423,301 350,250 277,301 303,215
231,161 321,161" />
O un triángulo, algo más sencillo que el anterior. Este de nuestra cosecha…
<polygon points="100,100 100,200 200,200"/>
line. Lo que necesitamos para pintar una línea son dos cosas: la coordenada origen de la línea y la coordenada destino. Para especificar dichos valores utilizaremos los atributos: x1, y1, x2 e y2 de la siguiente forma:
El elemento line quedaría de la siguiente forma:
<line x1="coordenada" y1="coordenada" x2="coordenada" y2="coordenada"/>
Aunque las técnicas de colores, bordes y opacidad son genéricas para todas las formas básicas cabe mencionar que para modificar el ancho de una línea podemos utilizar el atributo stroke-width del elemento line de la siguiente forma:
<line x1="coordenada" y1="coordenada" x2="coordenada" y2="coordenada" stroke-width="longitud"/>
Por defecto el valor de stroke-width es 1.
Formas Básicas
Gradientes
Puedes descargarte nuestro Manual SVG en formato PDF.
El manual se encuentra en continua revisión, de forma automática la URL proporcionada contendrá la última versión del Tutorial SVG.
A lo largo del Tutorial SVG se van explicando una serie de ejemplos. Podéis descargaros los ejemplos del Tutorial SVG desde el GitHub de Manual Web.
Si os gusta el contenido del material y los ejemplos os agradecemos si nos aportáis una estrella en GitHub.
Todas las preguntas y dudas sobre SVG las puedes consultar en el Foro sobre SVG. Y puedes echar un ojo a los ejemplos sobre el lenguaje SVG.
]]>Los gradientes pueden ser utilizados como relleno de un elemento, mediante el atributo fill o como borde, utilizando el atributo stroke.
Dentro de SVG hay dos tipos de gradientes:
A la hora de utilizar un gradiente, lo primero que tenemos que hacer es definirlo. Para ello utilizamos el elemento defs de la siguiente forma:
<defs>
...Definición de gradientes..
</defs>
Una vez definido, solo hay que utilizarlo en la figura que queramos. Para poder utilizar el gradiente definido lo tendremos que hacer mediante el atributo id que hayamos utilizado para definir el gradiente. La forma de referenciar al atributo id es mediante el relacionador url(#nombre_id) de la siguiente forma:
<elemento fill="url(#id_gradiente)">
Por ejemplo, en el siguiente código definimos un gradiente linear muy sencillo y lo aplicamos sobre un circulo:
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="rojo_naranja" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="20%" stop-color="#f00"/>
<stop offset="80%" stop-color="#ff0"/>
</linearGradient>
</defs>
<circle cx="600" cy="200" r="100" style="fill:url(#rojo_naranja)"
stroke="#000" stroke-width="2"/>
</svg>
linearGradient. Definiremos el elemento linearGradient de la siguiente forma:
<linearGradient id="identificativo" gradientUnits="userSpaceOnUse|objectBoundingBox"
gradientTransform="lista_de_transformacion"
x1="coordenada" y1="coordenada" x2="coordenada" y2="coordenada"
spreadMethod = "pad|reflect|repeat" xlink:href="uri">
Como es una definición grande, veamos los atributos más detenidamente:
userSpaceOnUse, las coordenadas que se definirán a posteriori tomarán como punto de partida, todo el sistema definido por el usuario. Así, x1,y1 será la coordenada más a la izquierda de todos el lienzo de objetos que tengamos definidos. Si el valor es objectBoundingBox, el sistema de coordenadas es definido en relación con el interior del objeto creado. Así, las coordenadas x1,y1 marcarán el lado izquierdo del elemento sobre el que definimos el gradiente. Por defecto es objectBoundingBox.pad, rellena la figura con el color del final, reflect, vuelve a empezar la serie de transformación de fin a inicio. Hace el efecto de un espejo. De ahí lo de reflect ¿no? y
repeat, vuelve a empezar la serie de transformación de inicio a fin.Jugando con los valores de las coordenadas podemos conseguir diferentes efectos a la hora de rellenar las figuras con un gradiente.
y1 e y2 deben de ser iguales, mientras que las coordenadas x1 y x2 deben de ser diferentes.x1 y x2 deben de ser iguales, mientras que las coordenadas y1 e y2 deben de ser diferentes.x1 y x2 como y1 e y2 deben de ser diferentes entre sí.Veamos como sería un ejemplo de gradiente:
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="rojo_naranja" x1="0%" y1="0%"
x2="50%" y2="0%" spreadMethod="reflect">
<stop offset="20%" stop-color="#f00"/>
<stop offset="80%" stop-color="#ff0"/>
</linearGradient>
</defs>
<circle cx="600" cy="200" r="100" style="fill:url(#rojo_naranja)"
stroke="#000" stroke-width="2"/>
</svg>
ellipse. Mientras que para el circulo nos bastaba con conocer el radio del mismo, en el caso de la elipse se necesita saber el radio en X y el radio en Y. Para ello tenemos los atributos rx y ry.
Además podremos colocar la elipse en unas coordenadas X e Y mediante los atributos cx y cy. En este caso es igual que para la elemento circle.
Los atributos del elemento ellipse nos quedarían de la siguiente forma:
El elemento ellipse nos quedaría de la siguiente forma:
<ellipse cs="coordenada" cy="coordenada" rx="longitud" ry="longitud">
Las técnicas de coloreado, bordes, opacidad,… son genéricas para todas las formas básicas (Shapes).
]]>circle. Para crear un circulo simplemente nos basta con conocer dos cosas: las coordenadas en las cuales queremos ubicar al circulo y el radio del mismo. Es por ello que el elemento circle nos ofrece los siguientes atributos:
El elemento circle nos quedará de la siguiente manera:
<circle cx="coordenada" cy="coordenada" r="longitud">
Las técnicas de coloreado, bordes, opacidad,… son genéricas para todas las formas básicas (Shapes).
]]>