Try opening it up in your favorite browser, resize the window and observe that the image is crisp at any magnification. The HTML5 logo is shown below - and you guessed it, it originates as an SVG file.Ĭlick on the logo and take a look at it in any modern browser and you'll see that it scales beautifully to any size window. So to illustrate, we'll start with the humble HTML5 logo. ![]() It'd be really useful to have your company logo, or anything like that full-screen in the background at all times, but of course that's super hard to do nicely with all the different screen sizes out there. Let's start with a simple scenario - you want a full page graphic to be the background of your web page. We'll dive into some ways to use SVG assets, plus some optimization tips to get you going. Popular authoring tools like the Drawing application in Google Drive, Inkscape, Illustrator, Corel Draw and lots of others generate SVG so there are lots of ways to generate content. One of the most useful things about SVG is that it’s resolution independent, meaning that you don’t need to think about how many pixels you have on your device, the result will always scale and be optimized by the browser to look great. SVG is a great way to present vector based line drawings and is a great complement to bitmaps, the latter being better suited for continuous tone images. We all know responsive design is a big part of handling varying screen sizes, and SVG is ideal for handling different size screens with ease. A great way to achieve vector drawing is through the use of Scalable Vector Graphics (SVG) which is a key part of HTML5. ![]() Many people think of canvas as the only way to draw a mixture of vectors and rasters on the web, but there are alternatives that have some advantages. Vector graphics are a great way to deliver stunning visual results using minimal bandwidth. Creating mobile content that dazzles means balancing the amount of data downloaded against maximal visual impact.
0 Comments
Leave a Reply. |