SVG Dibujando en la Web
-
Upload
miguel-angel-cumpa-ascuna -
Category
Technology
-
view
1.107 -
download
0
Transcript of SVG Dibujando en la Web
![Page 1: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/1.jpg)
EL FORMATO SVGDibujando Nuestra WebMiguel Angel Cumpa Ascuña
![Page 2: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/2.jpg)
¿Cuándo hacemos imágenes a partir de un dibujo vectorial para nuestras web?
![Page 3: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/3.jpg)
¿Qué herramientas usamos?
![Page 4: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/4.jpg)
Pero siempre las exportábamos a.png, .jpg, .gif.
![Page 5: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/5.jpg)
Y su calidad se perdía
![Page 6: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/6.jpg)
Vector Markup LanguageAutodesk, Hewlett- Packard, Macromedia, Microsoft y Visio
Precision Graphics Markup LanguageAdobe systems y Sun Microsystems
![Page 7: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/7.jpg)
W3C
VML + PGML = SVG
![Page 8: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/8.jpg)
¿Que es SVG?
![Page 9: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/9.jpg)
Scalable Vector Graphics
![Page 10: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/10.jpg)
Lenguaje de gráficos vectoriales bidimensionales en formato XML
![Page 11: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/11.jpg)
Rectas, curvas y áreas
Introducción de texto
Incrustación de imágenes
![Page 12: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/12.jpg)
Permite la animación de gráficos (con ayuda de SMIL)
![Page 13: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/13.jpg)
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
![Page 14: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/14.jpg)
Es una recomendación de la W3C
![Page 15: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/15.jpg)
Características
![Page 16: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/16.jpg)
El contenido del archivo es texto plano
![Page 17: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/17.jpg)
El tamaño del archivo es muy pequeño
![Page 18: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/18.jpg)
El contenido es buscable en la Red
![Page 19: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/19.jpg)
16 millones de colores y fuentes embebidas
![Page 20: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/20.jpg)
Efectos de imagen nativos a través de filtros
![Page 21: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/21.jpg)
Es posible la interacción con el usuario
![Page 22: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/22.jpg)
Mi primer dibujo
![Page 23: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/23.jpg)
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">
![Page 24: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/24.jpg)
Definir Elementos
<text x=”8” y=”16”>Hola mundo</text>
Etiqueta
Atributos
Contenido
![Page 25: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/25.jpg)
Definimos el lienzo
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
![Page 26: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/26.jpg)
<defs> <filter id="Gaussian_Blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="3" /> </filter></defs>
![Page 27: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/27.jpg)
<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
![Page 28: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/28.jpg)
<text x="150" y="210" style="fill:black;stroke-width:1;stroke:black;font-family:arial;font-size:24px">FIREFOX</text>
![Page 29: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/29.jpg)
<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>
![Page 30: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/30.jpg)
SVG en páginas HTML
![Page 31: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/31.jpg)
Usando la etiqueta <embed>
<embed src="rect.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"/>
![Page 32: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/32.jpg)
Usando de etiqueta <object>
<object data="rect.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" />
![Page 33: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/33.jpg)
Usando la etiqueta <iframe>
<iframe src="rect.svg" width="300" height="100"></iframe>
![Page 34: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/34.jpg)
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>
![Page 35: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/35.jpg)
Interesante pero..............
![Page 36: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/36.jpg)
Editores de Dibujos Vectoriales
InkscapeIllustratorCorel Drawetc......
![Page 37: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/37.jpg)
SVGEdit
![Page 38: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/38.jpg)
Inkscape
![Page 39: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/39.jpg)
En dos dimensiones, pero entonces.....
![Page 40: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/40.jpg)
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
![Page 41: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/41.jpg)
Galeriashttp://commons.wikimedia.org/wiki/Category:SVG
http://www.openclipart.org/
![Page 42: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/42.jpg)
Preguntas
![Page 43: SVG Dibujando en la Web](https://reader033.fdocuments.mx/reader033/viewer/2022052316/557ae37ed8b42a8f648b5384/html5/thumbnails/43.jpg)
Dibujando Nuestra Web
Mozilla Perúmozilla.pewww.facebook.com/mozillaperugroups.google.com/group/mozilla-peru
Miguel Angel Cumpa Ascuñ[email protected]