20 Great Websites That Use The Power of SVG

Thursday, June 2, 2016

SVG (or Scalable Vector Graphics) is an XML-based file format which contains two-dimension vectors and allows developers to create amazing graphics and graphical applications that are dynamic and animated.

SVG is a powerful image format that can be manipulated with code, either in a text editor or with CSS / JS and it is used more and more in web design.

One of the biggest pluses SVG has is that it can look sharp on all screen resolutions. It can contain very small file sizes and can be easily edited and modified. SVG images offer so much more freedom when it comes to the size of the images used, as well as the way they interact with your final design.

Now, that we know all this, let us take a moment to focus on some of the most inspirational and exciting websites that use the power of SVG.  Enjoy!

Cavalier: Conqueror of Excellence

These series of games were created using SVG for animation and graphics. Posture & Balance is the first game created for a platform called Cavalier that was designed with innovative technologies.

Cavalier-Conqueror-of-Excellence

Draw a better 2016

Draw a better 2016 is an amazing charitable project.  The website contains inspirational quotes, illustrations of the quote’s author and Christmas Cards, all with the help of a crisp graphics.

Draw-a-better-2016

Poignée de main virile

This animated and photographic new website was built for the France-based graphic design & digital creative studio Poignée de main virile. The result is incredible!

Poignée-de-main-virile

iFly50

When FLY KLM Magazine celebrated its fiftieth edition, it designed a vividly animated site for the ultimate travel collection. In this way, there were presented the 50 most beautiful, fascinating places on Earth.

iFly50

Love Notes

In honor of Valentine’s Say, Spotify created Love Notes, a feature that makes it easy to create the perfect playlist for your loved one. This feature takes a message from you and turns it into a poem with each letter corresponding to a song.

Love-Notes websites that use the power of svg

34

Using some high-quality and interesting SVG images, this site showcases everything you need to know about the first Georgian craft beer.  Funny thing, to enter this site, you must be at least 34 years old!

34

The Gift Of Giving

The website of the Danish jeweler Georg Jensen looks into the gift of giving using a two-screen strategy that helps clients discover how to make a gifting selection. This exquisite video gift guide concept can be explored via desktop, or via smartphone or tablet to interact with the presented content.

The-Gift-Of-Giving

The ARK: Star Citizen Starmap

Using an incredible ARK interface, this website presents Robert’s Space Industries, a spacecraft manufacturer, within the game “Star Citizen”. This is a portal for information, updates, and purchases of your very own spacecraft with which you can protect the citizens of Star Citizen.

The-ARK-Star-Citizen-Starmap

Keep Earthquakes Weird

Keep Earthquakes Weird is a platform created with stunning SVG graphic effects which were built with the goal of preparing the population of Portland in case of an earthquake. The content is very  educative.

Keep-Earthquakes-Weird websites that use the power of svg

Dream Car Collection | Toyota Dream Car Art Contest

Dream Car Collection presents a variety of incredible cars from all over the world expressed through the 9th Toyota Dream Car Art Contest. This content was created to encourage and inspire creativity in children. As you can see on this animated site, amazing ideas are born from dreams.

Dream-Car-Collection-Toyota-Dream-Car-Art-Contest

SpaceLamb Game

Help Bishop the Lamb get back to Earth safe and unharmed after having got into trouble during a long trip through the universe! This is an illustrated and animated website for the online game ‘SpaceLamb’.  In this game, you must help Bishop the Lamb return home after it got lost during a trip through the universe.

SpaceLamb-Game

30u

30u is an e-shop that sells shoes on a site created by developers that put attention on style and used some interesting SVG features.

30u

QED Group

QED GROUP site has amazing suggestive illustrations which will offer you a great navigation experience. The layout of the site is classy and smart.

QED-Group websites that use the power of svg

Melanie Daveid

Melanie Daveid’s website is one of the nicest portfolio sites that can be found on the web.  The site includes smooth transitions and gorgeous hand illustrations

Melanie-Daveid

WWF France – Earth Hour Paris

This animated site was created for WWF France and was used to announce that on March 19th, the lights of the Eiffel Tower will be switched off for Earth Hour.

WWF-France---Earth-Hour-Paris

2015 is yours

This site has a great visual design that is intended to be stunning and emotional. The final result is an excellent work with interesting dynamics and smooth integration.

2015-is-yours

Nerisson

Nerisson aka Jimmy Raheriarisoa is a French art director specialized in web/mobile design, illustration & motion design.  This is a great portfolio site, with nice illustrations and graphic features.

Nerisson

One Design Company

One Design Company is an experienced and enthusiast team of designers, developers, project managers, writers, and artists. Their site is a vivid and interactive one, based on crisp SVG images.

One-Design-Company websites that use the power of svg

LIX – The smallest 3D printing pen in the world

LIX is the smallest and smarter 3D printing pen on the market. With the help of a suggestive animation placed on the site’s homepage, you can experience how interesting 3D printing is.

LIX---The-smallest-3D-printing-pen-in-the-world

MIDORI AOYAMA

Midori Aoyama is a Tokyo-based DJ and producer. He has launched his own party “EUREKA!” that is still one of the best house music parties in Japan. His site is also innovative, an interesting example of SVG and how you can benefit from it as a user.

MIDORI-AOYAMA

The post 20 Great Websites That Use The Power of SVG appeared first on Web Design Blog | Magazine for Designers.



via http://ift.tt/1sP5TTc

No comments:

Post a Comment

 

The Cash Box Blueprint

Most Reading