Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

High resolution images using SVG

In this article we will understand what SVG images are and how you can use them today.

SVG

Figure 1: SVG

Scalable Vector Graphics (SVG)

One of the major trends of the moment when talking about web development is the SVG format, especially with the advent of responsive design and the consequent concern with devices with higher pixel density (HiDPI) as the retina display Apple used in the latest models iPhone, iPad and Macbook Pro. But what exactly is an SVG file? What is the difference between a vector and a bitmap? And how and why we use this technology to our advantage?

What is SVG?

SVG stands for Scalable Vector Graphics. The standard proposed by W3C in 1999, inspired in proprietary formats like Microsoft VML and PGML Adobe. In 2001 the SVG gained its first official release. The advantage of this format compared to previous is that it is an open standard (open source). That is, anyone can use without having to pay money to any company ...

An SVG file is basically an XML map that describes mathematically a two-dimensional graphical figure. Works like a set of instructions to perform a numerical design, which are converted into images on a software capable of interpreting it (like a browser, for example). SVG is an image for what HTML is to text.

Vector vs Bitmap

There are two main types of image files. Vectors and Bitmaps. The type of vector files (such as AI, EPS, CDR and our new best friend SVG) are lines, curves and geometric shapes mathematically described. Already bitmap files (such as JPG, PNG, GIF etc) are composed of a grid of pixels.

The advantages of using vector graphics are incredible. Firstly why can resize them infinitely without losing quality or sharpness. In practice this means that an icon, for example, has the same appearance without distortion on a smartphone or a TV of 42 ". No matter what amount of space it occupies the image, the file will have the same weight. The potentially saves the amount of bandwidth required to download, minimizes the amount of requests to the server since they are not required to serve several different images all needs, etc ... The possibility of using measures also makes the graphs in SVG format ideal for working with responsive design.

SVG vs PNG

Figure 2: SVG vs PNG

Where and when to apply

Lately the format has been used for icons, but it's useful for any graphic that needs to be resized as buttons, background patterns, etc ... A good tip is to use SVG graphics for logos. Thus the logo will always be sharp and with a good quality at any resolution or screen size, leaving his client much happier ...

There are also a myriad of other possibilities for this type of file as filters, animations, scripts and other interactive elements.

But good is not abuse. The more complex the image the longer it takes for the browser renders it. It is impractical to use format for a picture, for example.

How to make an SVG file

Well, if you really like math and hard coding you can open a text editor and write manually. If you want to venture there are some nice tutorials on the wiki. There are still some libraries javascript, as Raphael.js, which greatly facilitates working.

But for those who do not is the superhero of mathematics and want a more practical solution is possible to use some graphics tools like Adobe Illustrator, Corel Draw, Inkscape ... and simply export to other vector file format. There is even an online publisher called SVG Edit. It is pretty simple, but a good break branch in the absence of other software around.

You can find even some programs out there that promise to automatically convert bitmap SVG ... But this is not very good quality and creates disastrous results.

If you are not a great designer, no problems. You can still find several packages of icons in the format under creative commons license. A good source for those who like the minimalist style is the site Noum Project

Implementation

A small note on measures:

Recalling that for this technique to work correctly in case of responsive design is necessary to use measures such as MS and percentage. We will use practical examples to a small icon pulley. The "standard" size icon of our sample would be equivalent to 32px in height and width. If we consider that the standard measure of text (1em) is a browser equivalent to 16px, the default size of our icon so 2em would be (16 × 2 = 32). Taking this kind of concern is critical to ensure the flexibility of the images and give the developer much greater control over content. Do not forget that this measure will be affected according to the percentage of the font-size, ok? For practical purposes we will work with this article as 100%.

Time to put your hands dirty and learn some methods of development. There is no perfect solution, each is good for one type of situation. Let's look at some options, along with its positive and negative sides.

Listing 1: <object>

<object data='icon.svg' type='image/svg+xml'>
<img src='img/icon.png'>
</object>

Pro: It is the most widely used method of application, because the facility is to create a fallback for older versions of Internet Explorer.

Against: Not the solution semantics, since the W3C does not recommend using this tag for images. You can still generate some compatibility problems. The engine Safari / Webkit does not render properly object elements with transparency, for example.

Listing 2: <svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path fill="#231F20" d="M32,17.969v-4l-4.781-1.992c-0.133-0.375-0.273-0.737-0.445-1.094l1.93-4.805L25.875,3.25l-4.763,1.961
c-0.362-0.175-0.734-0.323-1.117-0.461L17.969,0h-4l-1.977,4.734c-0.398,0.141-0.781,0.289-1.161,0.469L6.078,3.294L3.25,6.122
l1.938,4.711C5,11.219,4.847,11.614,4.703,12.021L0,14.031v4l4.706,1.961c0.146,0.406,0.302,0.802,0.489,1.188l-1.903,4.742
L6.12,28.75l4.724-1.945c0.378,0.18,0.766,0.325,1.164,0.461L14.031,32h4l1.979-4.758c0.38-0.141,0.755-0.289,1.114-0.461
l4.797,1.922l2.828-2.828l-1.969-4.773c0.167-0.359,0.305-0.722,0.438-1.094L32,17.969z M15.969,22c-3.312,0-6-2.688-6-6
s2.688-6,6-6s6,2.688,6,6S19.281,22,15.969,22z"/>
</svg>

Pro: This tag from HTML5 was created specifically for this purpose, so this is the most modern and semantics. It is relatively simple: just paste the code inline SVG.

Against: Code too long hinders maintenance (since you need to manually edit not just replace a file), low degree of compatibility with older browsers.

Listing 3: <img>

 <img src='img/icon.svg'>

Pro: Simple application. Best option for image without interaction.

Against: For security reasons, some browsers may disable scripting in SVG and some interactive options in <img> tag as links.

background Images

Pro: This option uses only CSS. Very useful for some more complex combinations as sprites responsive.

Against: Fallback relies on javascript to function properly (see detailed explanation below).

.icon {
background: url(“../img/icon.sgv”) no-repeat;
width: 2em;
height: 2em;
}

Support

Google Chrome 4 +, Firefox 3 +, Safari 3.2 +, Opera and IE 8 + 9 +.

Methods Fallback

Background images in CSS

Older versions of Internet Explorer (8 and earlier) have various shortcomings, among them the lack of support for RGBA background. But some evil comes good. You can take advantage of this flaw in our benefit. Just prepare two images: one version for SVG most current browsers and another in PNG for older browsers and, in the CSS class, declare two Backgrouds. In a call the image in SVG and declare a color for the background of her wearing RGBA. Older browsers will ignore this line because, for them, the RGBA is a mistake and they will not read this background. For these browsers, put another background with the image in PNG. The counter is not the most semantic solution since the user will be required to download the images twice ... But there are some ways to get around with the use of plugins that control the requisition HD images server as Foresight.

body {
font-size:100%;
}

.icon {
background: url("../img/icon.png") no-repeat;
background: rgba(0,0,0,0) url("../img/icon.svg") no-repeat;
width: 2em;
height: 2em;
text-indent: -6000px;
}

Conditional comment for IE

<!--[if lte IE 8]><img src='img/icon.png'><![endif]-->
<!--[if gt IE 8]><img src='img/icon.svg'><![endif]-->
<!--[if !IE]> --><img src='img/icon.svg'><!-- <![endif]-->

Fallback using Modernizr

One can use the library Modernizr(http://modernizr.com/) to detect whether there is a support element. The script works as follows: if the browser supports the format of the class. Svg is added to the html, if not the class is attached. Svg-in. This enables the inclusion of an alternative css. See the example:

.icon {
width: 2em;
height: 2em;
text-indent: -6000px;
}

.icon.svg {
background: url(icon.svg) no-repeat;

}

.icon.no-svg {
background: url(icon.png) no-repeat;
}

Conclusion

So far there is no contraindication to the format and backwards compatibility problems can be easily circumvented with a little creativity and knowledge ... Who thinks high resolution graphics are only a concern for the distant future this time to open window (browser) and say hello to the present.



Front-end developer, WebEditor of MrBool.com and SEO Analyst. Work in the development area for over 4 years. For freelance work visit my portfolio: www.ricardoarrigoni.com.br

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login