Création des Logiciels de gestion d'Entreprise, Création et référencement des sites web, Réseaux et Maintenance, Conception
seo SVG at Google and in Internet Explorer 2013
Seo Master present to you: At Google we're excited about new web technologies like HTML 5, CSS 3, Web Fonts, SVG, faster JavaScript, and more. It's an exciting time to be a web developer, especially with the major advancements made in modern browsers like Firefox, Safari, Opera, and Chrome the last two years. In this blog post I want to share some of the work we've been doing with SVG in particular.
Today kicks off the start of the SVG Open 2009 conference, hosted at Google this year. The SVG Open conference is an annual conference where the SVG community comes together for three-days. Other sponsors of the conference this year include Microsoft and IBM.
What is SVG?
SVG, or Scalable Vector Graphics, is an open web standard that makes it easy to add interactive vector graphics to your web pages. Vector graphics, as opposed to bitmap graphics like JPG, GIF, or PNG files, describe the shapes on your screen with mathematical equations rendered by your computer rather than pixels. This allows vector graphics to stay beautiful and crisp whether displayed on a 40" monitor or a small mobile device.
Just as HTML gives you simple tags such as <form> or <table> to add to your web pages, SVG gives you such graphical tags as <circle> or <rect> for a rectangle that you can drop into your web page. Working with SVG is very similar to working with HTML - you use JavaScript to animate and make things interactive, CSS (Cascading Style Sheets) to add style, etc.
Why Google is Excited About SVG
We're excited about SVG for a host of reasons:
First, SVG is part of the HTML 5 family of technologies. One of the major new features of HTML 5 is the fact that you can now drop SVG tags into normal HTML, directly embedded into your page. We're excited about how this will empower developers. Here, for example, is a small code sample that embeds an SVG circle and rectangle right into an HTML 5 page:
Produces:
Second, we like that SVG is composed of text and markup, just like HTML. Because it's markup, search engines have a much easier time working with SVG; server-side languages like PHP or Google App Engine can simply emit SVG just like they generate HTML; and users and developers can easily view the source just like a normal web page to learn and move things forward. It's also easy to import and export SVG into tools like the open source Inkscape drawing package or Adobe Illustrator.
Third, the compact size of SVG when combined with HTTP GZip compression can easily make the images on a page roughly an order of magnitude smaller, and when directly embedded into an HTML 5 page can decrease the latency of a page by reducing the number of fetches. Small and fast are definitely two things we like at Google, and we like that SVG helps enable both.
Fourth, SVG integrates with the rest of the web stack, including JavaScript, CSS, and the DOM (Document Object Model). Even better, developers can easily adapt the skills they already know when working with SVG.
Finally, SVG is an open standard that is vendor-neutral. It also has accessibility built in, so when screen readers start to work with SVG your content will be future-proofed with accessibility baked in. We also like that SVG is now natively supported on all modern browsers, including the iPhone.
What Are Some Places We Use SVG?
We use SVG ourselves in a range of products. In Google Docs, for example, you can insert drawings, illustrations, and diagrams using a built in drawing tool:
On all browsers we use SVG to build this user interface; on Internet Explorer we have to revert to an older technology named Vector Markup Language (VML) unfortunately.
Another example is the Google Visualization API, which lets you access multiple sources of structured data that you can display, choosing from a large selection of visualizations. Some of these visualizations (such as this one and this one) use SVG to do their drawing on all browsers except Internet Explorer.
Canvas Or SVG? Oh My!
A natural question is how SVG compares to the Canvas tag. In our opinion both are needed for the web and are suitable for different applications.
The Canvas tag can best be thought of as a scriptable image tag that you build up yourself using JavaScript. This means it is lower-level, requiring you to keep track of all objects you have placed on the canvas. This can be a benefit if you want to do a large degree of non-interactive animation, but can quickly become a burden if you need to build sophisticated user interfaces.
SVG, meanwhile, is higher-level, doing the bookkeeping necessary to keep track of where everything is, making things like mouse interaction much easier. If you don't need this interaction, however, the overhead imposed by SVG can get in the way of certain applications. Because SVG is markup, importing and exporting is much easier, including SEO and accessibility.
We believe that Canvas versus SVG is a false dichotomy. A great example of both technologies working together is the Firefox Download Tracker. This page shows real time updates across the world whenever a copy of Firefox is downloaded. SVG is used to draw the map of the world; this is an appropriate use, since we don't want thousands of lines of JavaScript for this but rather markup from a tool like Inkscape. Red circles are drawn on top of the SVG using the Canvas tag as copies are downloaded; this is perfect for Canvas as the circles are non-interactive and might number in the thousands if copies are being downloaded rapidly.
SVG In Internet Explorer and in Wikipedia
Now that you know a bit more about SVG, why we like it, and some of the places we use it, let me tell you a bit about some of the work we've been doing to support SVG lately.
In addition to hosting this years conference, we are also helping to address the fact that SVG can't be used on Internet Explorer. It's hard for developers to use new web technologies if they can't deploy them on IE. In response to this, we've been working with others in the open source community on a drop-in JavaScript library named SVG Web that brings SVG to Internet Explorer.
SVG Web cleverly uses existing facilities on Internet Explorer 6, 7, and 8 to instantly enable SVG support without the user having to download any new software or plugins. Using SVG Web plus native SVG support you can now target close to 100% of the existing installed web base, today. Before SVG Web you could only target about ~30% of web browsers with SVG.
Once dropped in SVG Web gives you partial support for SVG 1.1, SVG Animation (SMIL), Fonts, Video and Audio, DOM and style scripting through JavaScript, and more in about a 60K library. Your SVG content can be embedded directly into normal HTML 5 or through the OBJECT tag. If native SVG support is already present in the browser then that is used. No downloads or plugins are necessary other than Flash which is used for the actual rendering, so it's very easy to use and incorporate into an existing web site. Here's a quick one minute introduction to SVG Web:
SVG Web is currently in alpha and is a developer release. It's also important to note that it is a collaboration with many others in the open source community outside Google, including Rick Masters at F5 Networks and James Hight at Zavoo Labs. Google is just one participant in this open source project. Finally, a JavaScript library will never be as fast as native support; this doesn't take Internet Explorer off the hook for needing to implement SVG, but it does help developers in the here and now deploy their SVG today to get the wheel turning.
In addition to helping enable SVG on Internet Explorer, we've been working with Wikipedia. Wikipedia has an impressively large collection of SVG files that are under Creative Commons licenses. Every one of these files is available in the Wikimedia Commons; for example here is the Linux penguin Tux as SVG. We've been working with Wikipedia to enable interactive zooming and panning of these SVG files, similar to Google Maps; even better, this functionality works in Internet Explorer thanks to the SVG Web library on the sixth largest site on the web.
Today at the SVG Open show we are demoing a prototype of the Wikipedia SVG Zoom and Pan tool; deployment to the wider base of Wikipedia users will happen after the conference and an appropriate QA period. Here's a screencast showing the tool in action:
We hope you are as excited as we are about SVG and other new web technologies in the pipeline!
2013, By: Seo Master
Today kicks off the start of the SVG Open 2009 conference, hosted at Google this year. The SVG Open conference is an annual conference where the SVG community comes together for three-days. Other sponsors of the conference this year include Microsoft and IBM.
What is SVG?
SVG, or Scalable Vector Graphics, is an open web standard that makes it easy to add interactive vector graphics to your web pages. Vector graphics, as opposed to bitmap graphics like JPG, GIF, or PNG files, describe the shapes on your screen with mathematical equations rendered by your computer rather than pixels. This allows vector graphics to stay beautiful and crisp whether displayed on a 40" monitor or a small mobile device.
Why Google is Excited About SVG
We're excited about SVG for a host of reasons:
First, SVG is part of the HTML 5 family of technologies. One of the major new features of HTML 5 is the fact that you can now drop SVG tags into normal HTML, directly embedded into your page. We're excited about how this will empower developers. Here, for example, is a small code sample that embeds an SVG circle and rectangle right into an HTML 5 page:
<!DOCTYPE html>
<html>
<body>
<h1>SVG/HTML 5 Example</h1>
<svg>
<circle id="myCircle"
cx="100" cy="75" r="50"
fill="blue"
stroke="firebrick"
stroke-width="3" />
<text x="60" y="155">Hello World</text>
</svg>
</body>
</html>
Produces:
Second, we like that SVG is composed of text and markup, just like HTML. Because it's markup, search engines have a much easier time working with SVG; server-side languages like PHP or Google App Engine can simply emit SVG just like they generate HTML; and users and developers can easily view the source just like a normal web page to learn and move things forward. It's also easy to import and export SVG into tools like the open source Inkscape drawing package or Adobe Illustrator.
Third, the compact size of SVG when combined with HTTP GZip compression can easily make the images on a page roughly an order of magnitude smaller, and when directly embedded into an HTML 5 page can decrease the latency of a page by reducing the number of fetches. Small and fast are definitely two things we like at Google, and we like that SVG helps enable both.
Fourth, SVG integrates with the rest of the web stack, including JavaScript, CSS, and the DOM (Document Object Model). Even better, developers can easily adapt the skills they already know when working with SVG.
Finally, SVG is an open standard that is vendor-neutral. It also has accessibility built in, so when screen readers start to work with SVG your content will be future-proofed with accessibility baked in. We also like that SVG is now natively supported on all modern browsers, including the iPhone.
What Are Some Places We Use SVG?
We use SVG ourselves in a range of products. In Google Docs, for example, you can insert drawings, illustrations, and diagrams using a built in drawing tool:
On all browsers we use SVG to build this user interface; on Internet Explorer we have to revert to an older technology named Vector Markup Language (VML) unfortunately.
Another example is the Google Visualization API, which lets you access multiple sources of structured data that you can display, choosing from a large selection of visualizations. Some of these visualizations (such as this one and this one) use SVG to do their drawing on all browsers except Internet Explorer.
Canvas Or SVG? Oh My!
A natural question is how SVG compares to the Canvas tag. In our opinion both are needed for the web and are suitable for different applications.
The Canvas tag can best be thought of as a scriptable image tag that you build up yourself using JavaScript. This means it is lower-level, requiring you to keep track of all objects you have placed on the canvas. This can be a benefit if you want to do a large degree of non-interactive animation, but can quickly become a burden if you need to build sophisticated user interfaces.
SVG, meanwhile, is higher-level, doing the bookkeeping necessary to keep track of where everything is, making things like mouse interaction much easier. If you don't need this interaction, however, the overhead imposed by SVG can get in the way of certain applications. Because SVG is markup, importing and exporting is much easier, including SEO and accessibility.
We believe that Canvas versus SVG is a false dichotomy. A great example of both technologies working together is the Firefox Download Tracker. This page shows real time updates across the world whenever a copy of Firefox is downloaded. SVG is used to draw the map of the world; this is an appropriate use, since we don't want thousands of lines of JavaScript for this but rather markup from a tool like Inkscape. Red circles are drawn on top of the SVG using the Canvas tag as copies are downloaded; this is perfect for Canvas as the circles are non-interactive and might number in the thousands if copies are being downloaded rapidly.
SVG In Internet Explorer and in Wikipedia
Now that you know a bit more about SVG, why we like it, and some of the places we use it, let me tell you a bit about some of the work we've been doing to support SVG lately.
In addition to hosting this years conference, we are also helping to address the fact that SVG can't be used on Internet Explorer. It's hard for developers to use new web technologies if they can't deploy them on IE. In response to this, we've been working with others in the open source community on a drop-in JavaScript library named SVG Web that brings SVG to Internet Explorer.
SVG Web cleverly uses existing facilities on Internet Explorer 6, 7, and 8 to instantly enable SVG support without the user having to download any new software or plugins. Using SVG Web plus native SVG support you can now target close to 100% of the existing installed web base, today. Before SVG Web you could only target about ~30% of web browsers with SVG.
Once dropped in SVG Web gives you partial support for SVG 1.1, SVG Animation (SMIL), Fonts, Video and Audio, DOM and style scripting through JavaScript, and more in about a 60K library. Your SVG content can be embedded directly into normal HTML 5 or through the OBJECT tag. If native SVG support is already present in the browser then that is used. No downloads or plugins are necessary other than Flash which is used for the actual rendering, so it's very easy to use and incorporate into an existing web site. Here's a quick one minute introduction to SVG Web:
SVG Web is currently in alpha and is a developer release. It's also important to note that it is a collaboration with many others in the open source community outside Google, including Rick Masters at F5 Networks and James Hight at Zavoo Labs. Google is just one participant in this open source project. Finally, a JavaScript library will never be as fast as native support; this doesn't take Internet Explorer off the hook for needing to implement SVG, but it does help developers in the here and now deploy their SVG today to get the wheel turning.
In addition to helping enable SVG on Internet Explorer, we've been working with Wikipedia. Wikipedia has an impressively large collection of SVG files that are under Creative Commons licenses. Every one of these files is available in the Wikimedia Commons; for example here is the Linux penguin Tux as SVG. We've been working with Wikipedia to enable interactive zooming and panning of these SVG files, similar to Google Maps; even better, this functionality works in Internet Explorer thanks to the SVG Web library on the sixth largest site on the web.
Today at the SVG Open show we are demoing a prototype of the Wikipedia SVG Zoom and Pan tool; deployment to the wider base of Wikipedia users will happen after the conference and an appropriate QA period. Here's a screencast showing the tool in action:
We hope you are as excited as we are about SVG and other new web technologies in the pipeline!
2013, By: Seo Master
seo SVG documents searchable on Google 2013
Seo Master present to you: Just a heads up that it should now be easier for users to find SVG files when searching on Google. That’s right, we’ve expanded our indexing capabilities to include SVG. Feel free to check out our Webmaster Help Center for the complete list of file types we support, and our Webmaster Blog for more information on our SVG announcement.
2013, By: Seo Master
2013, By: Seo Master
seo Get Your SVG On: The SVG Open 2009 Conference At Google 2013
Seo Master present to you: 
At Google we're excited about Scalable Vector Graphics (SVG). SVG is an open, browser-based standard that makes it easy to create interactive web graphics with new HTML-like tags such as the CIRCLE tag. We like it because it's part of the HTML 5 family of technologies while being search engine friendly; easy for JavaScript and HTML developers to adopt; exportable from your favorite drawing tools like Adobe IllustratorTM; and straightforward to emit from server-side systems like PHP and Google App Engine. It's also available in all modern browsers.
As part of our commitment to the Open Web and SVG we are helping to host the SVG Open 2009 conference this fall at our Mountain View campus. The theme this year is SVG Coming of Age. It will be held at the Google Crittenden Campus in Mountain View, California on October 2nd through 4th 2009, with additional workshops on October 5.
Co-sponsored by W3C, the SVG Open conference series is the premier forum for SVG designers, developers, and implementors to share ideas, experiences, products, and strategies. Over 60 presentations will be delivered by SVG experts from all over the world, tackling topics such as design workflows, mobile SVG, Web application development, Web mapping, geo-location based services, and much more.
Two panel discussions will allow the audience to discuss ideas and issues with the W3C SVG Working Group and implementors. Many W3C Members will be participating, including Google, IBM, Mozilla, Opera, Oracle, Quickoffice and Vodafone. The conference schedule and confirmed keynote speakers are now available.
The deadline for early-bird registration is August 31st, so get your registrations in soon! Full-price registration will remain available until October 1, and limited on-site registration may also be available at the registration desk during the conference. The W3C SVG Working Group and W3C's Chris Lilley and Doug Schepers will participate.
A wide range of exciting talks are on the docket. Here's a small sample:
* Ajax Toolkits supporting SVG graphics: Raphaël, dojo, Ample SDK, SVG
Web Project, JSXGraph
* SVG in Internet Explorer and at Google
* Beyond XHTML
* Progress in Opera and Mozilla
* Using Canvas with SVG
* Progress in Inkscape
* Implementors and Panel Sessions
* SVG and OpenStreetmap
* SVG in Wikipedia/Wikimedia
* SVG and ODF
* SVG for Scientific Visualization
* SVG for Webmapping
* SVG for Games
* SVG for Mobile Applications
* SVG Wow - demonstrations of great SVG demos
See you there!
2013, By: Seo Master
At Google we're excited about Scalable Vector Graphics (SVG). SVG is an open, browser-based standard that makes it easy to create interactive web graphics with new HTML-like tags such as the CIRCLE tag. We like it because it's part of the HTML 5 family of technologies while being search engine friendly; easy for JavaScript and HTML developers to adopt; exportable from your favorite drawing tools like Adobe IllustratorTM; and straightforward to emit from server-side systems like PHP and Google App Engine. It's also available in all modern browsers.
As part of our commitment to the Open Web and SVG we are helping to host the SVG Open 2009 conference this fall at our Mountain View campus. The theme this year is SVG Coming of Age. It will be held at the Google Crittenden Campus in Mountain View, California on October 2nd through 4th 2009, with additional workshops on October 5.
Co-sponsored by W3C, the SVG Open conference series is the premier forum for SVG designers, developers, and implementors to share ideas, experiences, products, and strategies. Over 60 presentations will be delivered by SVG experts from all over the world, tackling topics such as design workflows, mobile SVG, Web application development, Web mapping, geo-location based services, and much more.
Two panel discussions will allow the audience to discuss ideas and issues with the W3C SVG Working Group and implementors. Many W3C Members will be participating, including Google, IBM, Mozilla, Opera, Oracle, Quickoffice and Vodafone. The conference schedule and confirmed keynote speakers are now available.
The deadline for early-bird registration is August 31st, so get your registrations in soon! Full-price registration will remain available until October 1, and limited on-site registration may also be available at the registration desk during the conference. The W3C SVG Working Group and W3C's Chris Lilley and Doug Schepers will participate.
A wide range of exciting talks are on the docket. Here's a small sample:
* Ajax Toolkits supporting SVG graphics: Raphaël, dojo, Ample SDK, SVG
Web Project, JSXGraph
* SVG in Internet Explorer and at Google
* Beyond XHTML
* Progress in Opera and Mozilla
* Using Canvas with SVG
* Progress in Inkscape
* Implementors and Panel Sessions
* SVG and OpenStreetmap
* SVG in Wikipedia/Wikimedia
* SVG and ODF
* SVG for Scientific Visualization
* SVG for Webmapping
* SVG for Games
* SVG for Mobile Applications
* SVG Wow - demonstrations of great SVG demos
See you there!
2013, By: Seo Master
seo SVG Open 2009: “SVG coming of age” 2013
Seo Master present to you: Scalable Vector Graphics (SVG) is starting to pop up over all the place. It's showing up natively in browsers (including Firefox, Safari, Opera, Chrome and more). It's natively supported on the iPhone, and work is happening in various open source communities to create options for Internet Explorer. Google uses it under the covers in Google Maps (to create vector line drawings showing where to go); Google Docs (for drawing into presentations); and more. Wikipedia has a huge repository of SVG images, while many tools such as Inkscape, Illustrator, and Visio can either export to SVG or work with it natively. Vector graphics support through SVG and Canvas is consistently one of the top voted requests by developers.
Since we use and support SVG we thought it would be great to work with the community to host the SVG Open 2009 conference this fall. SVG Open will be in Mountain View at the Google campus from October 2-4, 2009. The theme this year is "SVG coming of age".
We are looking for contributors to present papers or teach courses. Presenters are asked to submit an extended abstract in English with an approximate length of 400 to 800 words by May 15. The abstracts are reviewed by a reviewing committee and presenters will be informed about acceptance on or before June 26. If your abstract is accepted, you will be asked to submit your full paper by August 31, according to instructions that will be sent to you.
Come and join us in the fall at SVG Open!
2013, By: Seo Master
Since we use and support SVG we thought it would be great to work with the community to host the SVG Open 2009 conference this fall. SVG Open will be in Mountain View at the Google campus from October 2-4, 2009. The theme this year is "SVG coming of age".
We are looking for contributors to present papers or teach courses. Presenters are asked to submit an extended abstract in English with an approximate length of 400 to 800 words by May 15. The abstracts are reviewed by a reviewing committee and presenters will be informed about acceptance on or before June 26. If your abstract is accepted, you will be asked to submit your full paper by August 31, according to instructions that will be sent to you.
Come and join us in the fall at SVG Open!
2013, By: Seo Master