Brief:
Scalar Vector Graphic very well know as SVG and widely used by designers & developers around the globe. Where theirs a need of excellent designs in regard to Icons, Images etc, SVG come to the rescue. SVG provides images/icons which look sharp, crisp works throughout all resolutions and yet doesn't loses its clarity. You can scale the image to any size without loosing its clarity.
Knowing the fact that its very easy to implement SVG on Web, it can be used in various industries to create Graphical components which can help represent various parts/sections a particular operation and many more.
Need :
When it comes to developing a great product/website there are multiple factors that count in; and one of those is the look & feel of the website. It has to look nice, sharp, crisp at the same time low on file size to maintain the performance of the website.
SVG provides that break through as it provides
How It Works:
We implemented the SVG by using JavaScript and CSS tricks, we divided the graphical structure in 5 compartments rather we mapped it in 5 different layers.
So whenever a specific compartment is selected/mapped it is been displayed as one of the layers with a colour to it.
The graphical structure consisted of 5 parts which we further divided into 5 layers for each part, so a single graphical structure consisted of 25 defined layers, giving the user the option to select and represent any particular operation.
Scalar Vector Graphic very well know as SVG and widely used by designers & developers around the globe. Where theirs a need of excellent designs in regard to Icons, Images etc, SVG come to the rescue. SVG provides images/icons which look sharp, crisp works throughout all resolutions and yet doesn't loses its clarity. You can scale the image to any size without loosing its clarity.
Knowing the fact that its very easy to implement SVG on Web, it can be used in various industries to create Graphical components which can help represent various parts/sections a particular operation and many more.
Need :
When it comes to developing a great product/website there are multiple factors that count in; and one of those is the look & feel of the website. It has to look nice, sharp, crisp at the same time low on file size to maintain the performance of the website.
SVG provides that break through as it provides
1. Small File Size which can be compressed and edited/modified.
2. Scalable.
3. Great look & Feel
4. Interactive design concepts.
We in one of our projects used SVG to represent specific marking of components as per their categorisation with multiple layers denoted by different colours.How It Works:
We implemented the SVG by using JavaScript and CSS tricks, we divided the graphical structure in 5 compartments rather we mapped it in 5 different layers.
So whenever a specific compartment is selected/mapped it is been displayed as one of the layers with a colour to it.
The graphical structure consisted of 5 parts which we further divided into 5 layers for each part, so a single graphical structure consisted of 25 defined layers, giving the user the option to select and represent any particular operation.