Canvas vs. SVG

Canvas vs. SVG

With the advent of Canvas and SVG (scalable vector graphics), developers now have better choices for doing graphics on the Web than in the past.

Before Canvas, plug-ins such as Flash or Silverlight were the standard way to create animations on the Web. The alternative was to create a collection of good old-fashioned HTML, JavaScript and images, and bundle them into a collection of moving parts—a tedious task at best.

Two primary types of graphics are used on the Web:

·         Raster graphics are arrays of pixels arranged on a grid, also known as a bitmap. Common raster file extensions are .jpg, .bmp, .png, .tiff and .psd. Because Canvas uses pixels, it is raster based.

·         Vector graphics use mathematical metadata contained in a file to describe the graphic. The V in SVG stands for vector. Common vector file types are .svg, .eps and .xps.

Canvas and SVG have a few features in common. Both Canvas and SVG have an Open Source library ecosystem, and you never need plug-ins for either technology.

Side-by-side comparison of common Canvas and SVG characteristics.

Canvas	SVG
Single DOM element	Multiple DOM elements
Script language	Markup language
Raster graphics	Vector graphics
No file format	.svg file format
Must reset canvas to change drawn shape	Can edit shapes after drawing
Not accessible	Accessible
Doesn’t support event handlers	Supports event handlers
Non-searchable, can’t index	Searchable, can index
Non-compressible	Compressible
Can use hardware acceleration	No hardware acceleration

Canvas tends to be well suited for highly interactive games, especially when combined with Internet Explorer 9 GPU offloading.
Canvas is a great choice for image editing, and although you can’t edit , you can save the context state to allow the user to undo actions, essentially to do real-time editing.

SVG is great for graphic basics such as displaying a resolution-independent company logo that scales to any screen size without pixel distortion.
Fractals and Mandelbrot sets are just two types of complex data visualizations that are well suited for SVG.

20 Best Practices for Speeding up Your Website

1.    Make fewer HTTP requests
•    Use CSS Image Sprites & Image Maps
•    Combine multiple script/css files into one
•    Use inline embedded images in the HTML

2.    Use a CDN
3.    Add an Expires or a Cache-Control Header
4.    Gzip components
5.    Put stylesheets at the top & scripts at the bottom
6.    Make JavaScript and CSS external
7.    Reduce DNS lookups
8.    Minify JavaScript, CSS and HTML
9.    Avoid Redirects
10.    Make Ajax cacheable
11.    Remove duplicate scripts
12.    Configure ETags
13.    Use GET for AJAX Requests
14.    Post-load Components
15.    Preload Components
16.    Reduce the Number of DOM Elements and events
17.    Split Components Across Domains
18.    Minimize the Number of iframes
19.    Optimize Images
20.    Keep Components under 25K

Spectrum of Modern Web Applications

I am more fascinated these days with the new approaches developers are discovering to author modern web aps. Java Script and JQuery is the center of the attraction in all the approaches. Sharing here, the summary of what I read in the documentation of a Microsoft initiative called Project Silk  to author modern web aps..

Spectrum of Web Applications

There is a spectrum of web applications being built today that can be grouped into four application types. These types of web applications are categorized by their full-page reload behavior and the amount of client-side interactivity they provide. Each application type provides a richer experience than the one listed before it.

• Static sites. These consist of static HTML pages, CSS, and images. They are static in that as each page is navigated to, the browser performs a full-page reload and there is no interaction with portions of the page. In addition, the page does not change no matter who requests it or when.
• Server rendered. In this model, the server dynamically assembles the pages from one or more source files and can incorporate data from another source during the rendering. The client-side script in these applications might perform some data validation, simple hover effects, or Ajax calls. As each page is navigated to, the browser performs a full-page reload. ASP.NET applications that don't make heavy use of client-side JavaScript are examples of server-rendered web applications.
• Hybrid design. This model is similar to the server-rendered web application, except that it relies heavily on client-side JavaScript to deliver an engaging experience. This type of application has islands of interactivity within the site that do not require full-page reloads to change the UI as well as some pages that do require a full-page reload. Mileage Stats is an example of a hybrid design.
• Single-page interface. In this model, a full-page load happens only once. From that point on, all page changes and data loading is performed without a full-page reload. Hotmail, Office Live, and Twitter are examples of single-page-interface web applications.

Characteristics of Modern Web Applications

While there are many types of modern web applications, addressing many different needs, they all have some characteristics in common.

• They are standards-focused. To have the broadest reach across multiple platforms and devices, applications attempt to implement the current and evolving standards and adopt future standards once ratified.
• They are interactive. Modern web applications keep the user engaged by providing constant feedback on their actions. This feedback can come in the form of messages, animations to hide or show elements, mouse-over effects, drag and drop feedback, the automatic refreshing of screen data, animation of various elements, or the implementation of fade-in or fade-out effects. Interactive applications leverage the fast JavaScript engines in modern browsers to perform their client-side tasks.
• They limit full-page reloads. Modern web applications seek to limit the number of full-page reloads. Reloads are much slower than a localized Ajax call to update a portion of the UI. Full-page reloads also limit the ability to animate state or page changes. By not performing a full-page reload, users can be kept in context, providing a fluid experience as they navigate from one task to another.
• They are asynchronous. Modern web applications use Ajax to dynamically load data, page fragments, or other assets instead of performing a full-page reload to acquire data or HTML content. Because the loading of data is asynchronous, the UI is able to stay responsive and keep the user informed while the data request is being fulfilled. This asynchronous on-demand loading also reduces application response time because requests can be tuned to return only the data and other content that needs to change.
• They manage data. When applicable, modern web applications provide client-side data caching and prefetching to boost client-side performance. This enables the UI to immediately respond to user input gestures because it does not have to make a call to the server for data. Data caching also serves to minimize the impact on server resources, increasing application scalability because fewer calls to the server are required.

Beginner Article : How to make a website fast

I read a good articles for that might be useful for beginner / novice Web developers here at Code Project.

Author describes about how page requests are fulfilled, DNS working, functioning of CSS, Java Script etc. and how to speed them fast and much more...

Visit to this page will be worth..
Happy Reading