Recomendados
Mais conteúdo relacionado
Destaque
Semelhante a SVG Dibujando en la Web
Semelhante a SVG Dibujando en la Web (20)
Último
Último (10)
SVG Dibujando en la Web
- 1. EL FORMATO SVG Dibujando Nuestra Web Miguel Angel Cumpa Ascuña
- 2. ¿Cuándo hacemos imágenes a partir de un dibujo vectorial para nuestras web?
- 4. Pero siempre las exportábamos a .png, .jpg, .gif.
- 5. Y su calidad se perdía
- 6. Vector Markup Language Autodesk, Hewlett- Packard, Macromedia, Microsoft y Visio Precision Graphics Markup Language Adobe systems y Sun Microsystems
- 7. W3C VML + PGML = SVG
- 8. ¿Que es SVG?
- 10. Lenguaje de gráficos vectoriales bidimensionales en formato XML
- 11. Rectas, curvas y áreas Introducción de texto Incrustación de imágenes
- 12. Permite la animación de gráficos (con ayuda de SMIL)
- 13. SMIL Synchronized 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
- 14. Es una recomendación de la W3C
- 15. Características
- 16. El contenido del archivo es texto plano
- 17. El tamaño del archivo es muy pequeño
- 18. El contenido es buscable en la Red
- 19. 16 millones de colores y fuentes embebidas
- 20. Efectos de imagen nativos a través de filtros
- 21. Es posible la interacción con el usuario
- 22. Mi primer dibujo
- 23. 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/s vg11.dtd">
- 24. Definir Elementos <text x=”8” y=”16”>Hola mundo</text> Etiqueta Atributos Contenido
- 25. Definimos el lienzo <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
- 26. <defs> <filter id="Gaussian_Blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="3" /> </filter> </defs>
- 27. <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
- 28. <text x="150" y="210" style="fill:black;stroke- width:1;stroke:black;font-family:arial;font- size:24px">FIREFOX</text>
- 29. <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>
- 30. SVG en páginas HTML
- 31. Usando la etiqueta <embed> <embed src="rect.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/vie wer/install/"/>
- 32. Usando de etiqueta <object> <object data="rect.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer /install/" />
- 33. Usando la etiqueta <iframe> <iframe src="rect.svg" width="300" height="100"> </iframe>
- 34. Deseado... <html xmlns: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>
- 36. Editores de Dibujos Vectoriales Inkscape Illustrator Corel Draw etc......
- 37. SVGEdit
- 38. Inkscape
- 39. En dos dimensiones, pero entonces.....
- 40. SVG en 3D de Kevin Lindsey http://www.kevlindev.com/samples/rotate3d/index.htm SVG en 3D de Lutz Tautenhahn http://www.lutanho.net/svgvml3d/index.html SVG in 3D http://debeissat.nicolas.free.fr/svg3d.php
- 42. Preguntas
- 43. Dibujando Nuestra Web Mozilla Perú mozilla.pe www.facebook.com/mozillaperu groups.google.com/group/mozilla- peru Miguel Angel Cumpa Ascuña themiseck.rock@gmail.com