por  James Lynn
Scalable Vector Graphics <ul><li>SVG es un estándar abierto basado en formato XML para describir imágenes vectoriales en 2...
Un poco de historia sobre SVG <ul><li>En 1998 Macromedia, HP, Autodesk, Visio Corp y Microsoft sometieron a la W3C el  VML...
Por otra parte Adobe, IBM, Netscape y Sun Microsystems presentaron PGML  (Precision Graphics Markup Language)  a la W3C. <...
Un poco de historia sobre SVG <ul><li>En febrero del año 1999 la W3C publicó el primer borrador de la especificación. </li...
Un poco de historia sobre SVG <ul><li>Microsoft implementó VML en su navegador
Adobe lanzó el plug-in SVG Viewer </li><ul><li>Esto le dió la capacidad a los browsers de desplegar contenido SVG
Pretendía competir con Flash </li><ul><li>El apoyo a este plug-in se descontinuó en enero de 2009. </li></ul></ul></ul>
Un poco de historia sobre SVG
 
 
¿Por qué considerar SVG? <ul><li>Archivos pequeños =  fast download
Vectores =  resolution independent
Las imágenes se construyen en el navegador
El usuario puede interactuar y modificar las imágenes de forma sencilla y práctica
Apoyo nativo a SMIL  (Synchronized Media Integration Language)  por lo cual es capaz de producir animaciones </li></ul>
¿Por qué considerar SVG? <ul><li>Su lenguaje de scripting es JavaScript
Por ser XML facilita su conversión, importación y exportación desde y hacia otros formatos
Es un formato totalmente abierto
Podemos editarlo con cualquier editor de texto. No es necesario software especializado. </li></ul>
Apoyo entre los navegadores Actualmente son los grandes  en apoyo a SVG Ambos browsers son más rápidos que Firefox manejan...
SVG móvil <ul><li>SVG Tiny
SVG Basic </li></ul>La meta es proveer la capacidad de crear una amplia gama de contenido gráfico estático, animado e inte...
SVG móvil <ul><li>iPhone a través de Safari
Cualquier celular o unidad móvil a través de Opera </li></ul>
¿Qué necesito para trabajar? <ul><li>Papel
Editor de texto
Upcoming SlideShare
Loading in …5
×

Scalable Vector Graphics

2,450 views

Published on

A brief introduction to SVG Graphics.
Presented by James Lynn at BarCamp San Juan on February 11, 2011.

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,450
On SlideShare
0
From Embeds
0
Number of Embeds
91
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Authoring tools de Adobe en esta página Illustrator CS2 y GoLive. Se nota que no se actualiza hace años.
  • Scalable Vector Graphics

    1. 1. por James Lynn
    2. 2. Scalable Vector Graphics <ul><li>SVG es un estándar abierto basado en formato XML para describir imágenes vectoriales en 2D, estáticas, animadas e interactivas. </li></ul>
    3. 3. Un poco de historia sobre SVG <ul><li>En 1998 Macromedia, HP, Autodesk, Visio Corp y Microsoft sometieron a la W3C el VML (Vector Markup Language) basado en XML para que fuera considerado como estándar en gráficas en vectoriales para la web.
    4. 4. Por otra parte Adobe, IBM, Netscape y Sun Microsystems presentaron PGML (Precision Graphics Markup Language) a la W3C. </li></ul>
    5. 5. Un poco de historia sobre SVG <ul><li>En febrero del año 1999 la W3C publicó el primer borrador de la especificación. </li></ul>
    6. 6. Un poco de historia sobre SVG <ul><li>Microsoft implementó VML en su navegador
    7. 7. Adobe lanzó el plug-in SVG Viewer </li><ul><li>Esto le dió la capacidad a los browsers de desplegar contenido SVG
    8. 8. Pretendía competir con Flash </li><ul><li>El apoyo a este plug-in se descontinuó en enero de 2009. </li></ul></ul></ul>
    9. 9. Un poco de historia sobre SVG
    10. 12. ¿Por qué considerar SVG? <ul><li>Archivos pequeños = fast download
    11. 13. Vectores = resolution independent
    12. 14. Las imágenes se construyen en el navegador
    13. 15. El usuario puede interactuar y modificar las imágenes de forma sencilla y práctica
    14. 16. Apoyo nativo a SMIL (Synchronized Media Integration Language) por lo cual es capaz de producir animaciones </li></ul>
    15. 17. ¿Por qué considerar SVG? <ul><li>Su lenguaje de scripting es JavaScript
    16. 18. Por ser XML facilita su conversión, importación y exportación desde y hacia otros formatos
    17. 19. Es un formato totalmente abierto
    18. 20. Podemos editarlo con cualquier editor de texto. No es necesario software especializado. </li></ul>
    19. 21. Apoyo entre los navegadores Actualmente son los grandes en apoyo a SVG Ambos browsers son más rápidos que Firefox manejando gráficas SVG Desde sus comienzo (2008) Chrome ha tenido la capacidad de desplegar SVG. Había que usar el Adobe SVG plug-in pero IE9 le da apoyo nativo a SVG pero no completo.
    20. 22. SVG móvil <ul><li>SVG Tiny
    21. 23. SVG Basic </li></ul>La meta es proveer la capacidad de crear una amplia gama de contenido gráfico estático, animado e interactivo para dispositivos móviles incluyendo laptops y computadoras.
    22. 24. SVG móvil <ul><li>iPhone a través de Safari
    23. 25. Cualquier celular o unidad móvil a través de Opera </li></ul>
    24. 26. ¿Qué necesito para trabajar? <ul><li>Papel
    25. 27. Editor de texto
    26. 28. Navegador </li></ul>
    27. 29. Capacidades de SVG <ul><li>Líneas
    28. 30. Paths
    29. 31. Figuras básicas </li><ul><li>Rectángulos
    30. 32. Elipses
    31. 33. Polígonos </li></ul><li>Texto
    32. 34. Fill and Line color
    33. 35. Animación
    34. 36. Fonts </li></ul><ul><li>Gradientes y Patrones
    35. 37. Clip, máscaras y montajes
    36. 38. Filtros / Efectos
    37. 39. Interactividad
    38. 40. Enlaces / Links
    39. 41. Scripting
    40. 42. SMIL (Synchronized Multimedia Integration Language)
    41. 43. JavaScript
    42. 44. Metadata </li></ul>
    43. 52. Software <ul><li>Corel Draw
    44. 53. Adobe Illustrator
    45. 54. Adobe Acrobat
    46. 55. Inkscape (su formato nativo es SVG)
    47. 56. GIMP
    48. 57. The GNOME Project </li></ul><ul><li>Google Docs
    49. 58. LibreOffice Writer
    50. 59. Microsoft Visio
    51. 60. OpenOffice Draw
    52. 61. Scribus
    53. 62. Xara Xtreme </li></ul>
    54. 64. Referencias <ul><li>W3C http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html
    55. 65. Wikipedia http://en.wikipedia.org/wiki/Scalable_Vector_Graphics http://en.wikipedia.org/wiki/SVG_animation
    56. 66. WordIQ http://www.wordiq.com/definition/SVG
    57. 67. SVG Tutorial http://www.itk.ilstu.edu/faculty/javila/svg/SVG_overview/origins.htm
    58. 68. SVG Authoring tools and editors http://www.w3.org/Graphics/SVG/IG/wiki/Authoring_tools_and_editors </li></ul>
    59. 69. Referencias <ul><li>Mozilla SVG Project http://www.mozilla.org/projects/svg/
    60. 70. SVG-edit – Editor Online de SVG http://code.google.com/p/svg-edit/
    61. 71. SVG at Google and in Internet Explorer The official Google Code Blog http://googlecode.blogspot.com/2009/10/svg-at-google-and-in-internet-explorer.html
    62. 72. SVG Open http://www.svgopen.org/2002/papers/robinson__csiro_svg_mobile/
    63. 73. SVG Logo – Usos y política http://www.w3.org/2009/08/svg-logos.html </li></ul>
    64. 74. Encuéntrame y sígueme <ul><li>Blog: www.jameslynn.com
    65. 75. Twitter: @jameslynn
    66. 76. Facebook.com/JamesJLynn </li></ul>

    ×