svg dibujando en la web
Post on 12-Jun-2015
1.106 Views
Preview:
TRANSCRIPT
EL FORMATO SVGDibujando Nuestra WebMiguel Angel Cumpa Ascuña
¿Cuándo hacemos imágenes a partir de un dibujo vectorial para nuestras web?
¿Qué herramientas usamos?
Pero siempre las exportábamos a.png, .jpg, .gif.
Y su calidad se perdía
Vector Markup LanguageAutodesk, Hewlett- Packard, Macromedia, Microsoft y Visio
Precision Graphics Markup LanguageAdobe systems y Sun Microsystems
W3C
VML + PGML = SVG
¿Que es SVG?
Scalable Vector Graphics
Lenguaje de gráficos vectoriales bidimensionales en formato XML
Rectas, curvas y áreas
Introducción de texto
Incrustación de imágenes
Permite la animación de gráficos (con ayuda de SMIL)
SMILSynchronized Multimedia Integration Language
Basado en XML
Estándar para presentaciones multimedia
Permite integrar audio, video, imágenes, texto u otro contenido multimedia
Se integra en XHTML y SVG
Es una recomendación de la W3C
Características
El contenido del archivo es texto plano
El tamaño del archivo es muy pequeño
El contenido es buscable en la Red
16 millones de colores y fuentes embebidas
Efectos de imagen nativos a través de filtros
Es posible la interacción con el usuario
Mi primer dibujo
Un archivo SVG comienza
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
Definir Elementos
<text x=”8” y=”16”>Hola mundo</text>
Etiqueta
Atributos
Contenido
Definimos el lienzo
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs> <filter id="Gaussian_Blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="3" /> </filter></defs>
<script type ="text/ecmascript"><![CDATA[ function circle_click(evt) { var circle = evt.target ; var cRad = circle.getAttribute("r") ; if (cRad < 100) circle.setAttribute("r" , cRad *2) ; else circle.setAttribute("r" , cRad *0.5) ; }]]></script>
* ó javascript
<text x="150" y="210" style="fill:black;stroke-width:1;stroke:black;font-family:arial;font-size:24px">FIREFOX</text>
<circle cx="200" cy="200" r="100" onclick ="circle_click(evt)" style="fill:rgb(248,89,0);stroke-width:1;stroke:black;filter:url(#Gaussian_Blur)"/></svg>
SVG en páginas HTML
Usando la etiqueta <embed>
<embed src="rect.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"/>
Usando de etiqueta <object>
<object data="rect.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" />
Usando la etiqueta <iframe>
<iframe src="rect.svg" width="300" height="100"></iframe>
Deseado...
<htmlxmlns:svg="http://www.w3.org/2000/svg"><body><p>This is an HTML paragraph</p><svg:svg width="300" height="100" version="1.1" ><svg:circle cx="100" cy="50" r="40" stroke="black"stroke-width="2" fill="red" /></svg:svg></body></html>
Interesante pero..............
Editores de Dibujos Vectoriales
InkscapeIllustratorCorel Drawetc......
SVGEdit
Inkscape
En dos dimensiones, pero entonces.....
SVG en 3D de Kevin Lindseyhttp://www.kevlindev.com/samples/rotate3d/index.htm
SVG en 3D de Lutz Tautenhahnhttp://www.lutanho.net/svgvml3d/index.html
SVG in 3Dhttp://debeissat.nicolas.free.fr/svg3d.php
Galeriashttp://commons.wikimedia.org/wiki/Category:SVG
http://www.openclipart.org/
Preguntas
Dibujando Nuestra Web
Mozilla Perúmozilla.pewww.facebook.com/mozillaperugroups.google.com/group/mozilla-peru
Miguel Angel Cumpa Ascuñathemiseck.rock@gmail.com
top related