Chances are you know what to expect when you see a file name with an extension like JPG, GIF or even PNG. You know when you open that file, you are going to be presented with an image of some sort. What about when the file name is accompanied by the extension SVG? Just what the heck is an SVG, anyway?
Scalable Vector Graphics. Okay, now you know everything you need to use SVG file everything you need to use SVG files. Go out and fruitfully populate the world with your genius.
Yeah, now you see why your enjoyment of image files has never really been noticeably compromised by ignorance of what letters like JPG and GIF actually stand for. Clearly, it is not enough to know that SVG stands for Scalable Vector Graphics.
It may not even be enough to know that SVG files are preferred among web designers because they can be easily scaled to look good on computers running a host of different resolutions. Or that SVG files offer significantly more accommodating than the more rigidly constricted JPG.
Or that you can do amazing things with SVG files with a text editor. Yes, you read that right: a text editor. Indeed, even knowing that SVG images can be manipulated through JavaScript or CSS may not be quite enough to convince you of the extraordinary power that these images offer.
You will definitely want to understand that SVG files are not exactly ideal for pixel management. Graphics involving sophisticated vectoring, sure, but if all you expect from an image editing program is to turn red eyes blue, you might want to reconsider the advantages that come with working with Scalable Vector Graphics.
Advantages of SVG
Responsive and CSS editable
Ever worked for hours to get an image looking just right on your computer only to find that it almost hurts your eyes to look at it on screens with lower resolutions? One of the great advantages of SVG images are their almost total independence from the tyranny of varying resolutions.
When it comes to high-density resolution, work to your heart’s content with SVG files and walk away content. No matter what size screen you look at your work, if it’s high-density, the file is going to look amazing. The same cannot be said of those raster images which all too often become prisoners of the malevolent pixelation pixies.
SVG works incredibly intuitively with CSS. The familiarity of working classes and ids will have feeling right at home when using SVG as long as you keep in mind they must be either inline or loaded with an object tag in order to use external stylesheets. Other advantages of using SVG with CSS include the use of self-contained CSS within the image itself. Media queries using SVG allow the images to be manipulated within the viewport in a number of creative ways.
SVG files are better than images
Smaller than bitmapped images like JPG and PNG files, SVG offer the considerable advantage of taking up less space on a website. When it comes to images on the web, smaller means faster. Faster downloads means happier website visitors. Further improving the speed quotient is that SVG files are part of the source code itself and therefore bypass the need for HTTP requests.
SVG files are even better than font icons
What about font icons? How does SVG stack up? Pretty darn good. To begin with, SVG offers more adaptability when it comes to choice of colors and sophistication of design. The inescapable disadvantage of font icons is that you are limited to just one single color.
Less obvious is the inability to manipulate font icons. SVG images, on the other hand, offer the sweet value of refining the granularity exactly where needed without the requirement of font regeneration. Which brings us back to the use of a text editor when working with SVG images. That refinement is entirely capable of being done quickly in a quality text editing program.
It’s a step toward the future
When it comes to internet technology, the future isn’t here, it’s back there with last week’s garbage can. You can’t predict the future, of course, but as long as the standard for the entire world wide web around the world wide world remains under the constant vigilance of the W3C, it’s a safe bet that SVG will prevail. Take the time to notice the prevalence of SVG as the big man on campus when it comes to vector graphics in just about every browser and you will understand why there is no reason to start getting nervous about a new kid in town taking over any time soon.
Where you can use them
Logos, icons, social media, UI. Think of all the visual elements that make up surfing the web and you begin to get an idea of exactly how SVG images can be utilized. This utilization is especially useful for creating icons that include short bits of text. Why the popularity of SVG? Because the text remains sharp and defined and crystal clear regardless of resolution. The tyranny of screen resolution is over. Long live the revolution!
Of course, it is worth admitting that the revolution isn’t complete. The tyranny, if you will, of those other more familiar image formats remains firmly in place when under certain circumstances. Okay, not so much tyranny and just plain usefulness. If you are presented with a quality JPG or GIF, it likely will make little sense to convert the file to SVG at the cost of maintaining the original integrity of that image.
For graphs
The very name Scalable Vector Graphics cries out images that take a more mathematical quality like graphs and even infographics. SVG files are easily manipulated to work with statistical graphs as well as more kinetic graphical presentations. Think of uses like AJAX request and data that is randomly generated. Any kind of imagery requiring vectors is ideal for SVG files.
For simple web based games
Not all game design can benefit from SVG images. Pixel-based art and non-vector animation aside, however, SVG can become a creative part of the game design industry. What kinds of games would benefit from SVG? Those that are less dependent on the quality of character animation and movement and more dependent on presenting non-kinetic information.
Tutorials
Check out this selection of tutorials appropriate for both basic and advanced users. Tutorials covering every aspect of SVG files are our aim.
SVG Tutorial (pdf)
SVG Essentials
Using SVG
Resolution Independence With SVG
Exporting SVG for the web with Adobe Illustrator CC
Export multiple icons to SVG files from Adobe Illustrator
Making SVGs Responsive with CSS
Animated SVG Icon
How to Build a Page Scroll Progress Indicator With jQuery and SVG
SVG Scrolling Animation Triggered By ScrollMagic
Animate Text with SVG Paths
Making a SVG HTML Burger Button
Icons Filling Effect
Animated SVG Icons with Snap.svg
The Simple Intro to SVG Animation
Interactive Infographic with SVG and CSS Animations
An introduction to SVG animation
Animate SVG Icons with CSS3 & JavaScript
Ending Thoughts
The advantages of using SVG is clear, but the future is actually brighter than you might suspect. Advancements in retina devices and the explosion in mobile apps is actually creating more possibilities for the need to display high quality images.
What separates SVG from the pack is essentially this: moving desktop to laptop to netbook to tablet to smartphone screen means ever-changing screen resolutions that each affect the quality of the display. This is inconsistency presents significant problems with working with JPG, PNG and GIF. When working with SVG images, however…not so much.
Get the picture? Then go out and dive into the flexible and adaptable world of Scalable Vector Graphics. Create your masterpiece on your laptop and then edit on your tablet and tweak things on your smartphone.
By the time you put all the creative information you can learn from the wealth of available tutorials, you will positively revel in the freedom from resolution tyranny that had has you pulling out your hair when working with those more familiar JPG, GIF and PNG images.
You will definitely like these articles
Source: http://ift.tt/1wdtoAR
No comments:
Post a Comment