Dynamic Svg with Click Hover Effect (SnapSvg)

  • Status: Closed
  • Prize: $121
  • Entries Received: 7
  • Winner: kh1604

Contest Brief

We will provide you with a building diagram done in vector (illustrator).

If you have the knowledge of snapsvg, a programming required here.

1) What you need to do is to convert vector into SVG that can be place in a website.
2) With the svg that you convert, you will need to do hoover effect on various part of the svg.

On hoover on SVG Building
- to show some animation effects
- to show labels and information.

A demo will be this [url removed, login to view]

Please see attached diagram.
With the complete source files, allow us to edit the text and embed in a website.

Recommended Skills

Employer Feedback

“Great working attitude, design and professionalism.”

Profile image smarthosting, Singapore.

Top entries from this contest

View More Entries

Public Clarification Board

  • smarthosting
    Contest Holder
    • 8 months ago

    uploaded ai file and a powerpoint presentation for clearer idea.

    • 8 months ago
  • ronilto1001
    ronilto1001
    • 8 months ago

    Please, check #7 link. I've made the snap.svg code. Thanks.

    • 8 months ago
    1. smarthosting
      Contest Holder
      • 8 months ago

      uploaded ai file and a powerpoint presentation for clearer idea.

      • 8 months ago
  • khanfarhaan
    khanfarhaan
    • 8 months ago

    Hi there,
    Please can i have the vector file of the diagram? I know how to use snapsvg, I will create an animation for you.
    Thanks :)

    • 8 months ago
    1. smarthosting
      Contest Holder
      • 8 months ago

      please submit an entry.

      • 8 months ago
    2. smarthosting
      Contest Holder
      • 8 months ago

      uploaded ai file and a powerpoint presentation for clearer idea.

      • 8 months ago
  • smarthosting
    Contest Holder
    • 8 months ago

    I have uploaded the ai file.

    • 8 months ago
  • chimera28
    chimera28
    • 8 months ago

    You should've said that this project Require SNAP.SVG animation format...

    • 8 months ago
    1. chimera28
      chimera28
      • 8 months ago

      or "animate SVG using SNAP.SVG API.

      • 8 months ago
    2. smarthosting
      Contest Holder
      • 8 months ago

      Thanks. My bad. Tried to change but unable.

      • 8 months ago
  • krisgraphic
    krisgraphic
    • 8 months ago

    SVG is an excellent solution if Ai is damaged and there is no need for Illustrator. For video SVG format can still perform a good solution in Photoshop, if you animate.

    • 8 months ago
  • krisgraphic
    krisgraphic
    • 8 months ago

    There is one trick that often works in After Effects or Premiere, and refers to the quality of the video-If you have such an FLV file, you can improve quality by converting to MPEG4, MPEG or WMV file. The better the quality of the MPEG-4.

    • 8 months ago
  • krisgraphic
    krisgraphic
    • 8 months ago

    SVG is the easiest file by weight, and can output a brief description., Even though you have an earlier version of Corel or illustrator. When converting the file Ai in SVG, Adobe After Effects and Premier will scatter the materials in layers in Videotrack. In this cross should have installed options in Illustrator that allows overthrow SVG file for video, which is hard to find a free version.

    Another good idea is, as such. SVG can be specially preserved as a separate video file for example. FLV and that each layer of video in particular, because it is lighter and easier to render, and the dimensions of the video is easier processing.

    • 8 months ago
  • smarthosting
    Contest Holder
    • 8 months ago

    We have the vector file. We need you to convert into a web SVG file. Do take note, this SVG hoover effect or animation over several area building, you will need a knowledge of programming to make the effects or animation. A sample demo will be this link. http://snapsvg.io/demos/#mascot

    • 8 months ago
    1. krisgraphic
      krisgraphic
      • 8 months ago

      Yes, it is possible to animate the building, the effects will turn out similar to the Flash program, but with some restrictions. Some effects in After Effects to focus only on the text, a certain image, which can act on the vector. The building will animate a little harder, there still has to give a 3D effect in Illustrator, it still needs to behave realistically, it is much harder to implement. For example. can introduce each part of the building to act as a layer in the animated SVG as transparent to the composition gives the building as a whole-the process is much easier to perform in Flash and then render in After Effects as well as HD video resolution for video dimensions.

      • 8 months ago
    2. mattsrinc
      mattsrinc
      • 8 months ago

      No - well done AI file can be easily converted to great SVG and animated well. And have many more benefits to Flash or video. Yet it's true there is no great tool to create and animate SVG files (with layers) at the moment.

      • 8 months ago
  • ronilto1001
    ronilto1001
    • 8 months ago

    Please, check #7. Thanks.

    • 8 months ago
  • BRgraphix
    BRgraphix
    • 8 months ago

    hello Sir , Please contact me on chat and i will explain all what you need , thanks

    • 8 months ago
  • smarthosting
    Contest Holder
    • 8 months ago

    anyone who knows http://snapsvg.io/demos/#mascot

    • 8 months ago
    1. smarthosting
      Contest Holder
      • 8 months ago

      seems unable to chat with you directly.. shows error upon clicking your username.

      • 8 months ago
    2. kh1604
      kh1604
      • 8 months ago

      You can contact now via my Entry #6

      • 8 months ago
  • krisgraphic
    krisgraphic
    • 8 months ago

    Please look #5 full explain

    • 8 months ago
    1. krisgraphic
      krisgraphic
      • 8 months ago

      You can contact me, thanks

      • 8 months ago
  • krisgraphic
    krisgraphic
    • 8 months ago

    Please look #4 explanation how to convert original file in SVG without problems. For Animation/Effect, is the best to wok on Adobe Premiere or After Effect, because he can open the SVG file, and make a title too if you have a SVG file text original transparent, it will play on video effect.

    • 8 months ago
  • harunk
    harunk
    • 8 months ago

    hi, You want to convert it to svg with all the details of the building. Or is it just sketchy

    • 8 months ago
    1. smarthosting
      Contest Holder
      • 8 months ago

      we have the vector file.

      • 8 months ago
    2. smarthosting
      Contest Holder
      • 8 months ago

      convert it into web SVG with hoover effects several area of the building, comes an effect and shows information.

      • 8 months ago
  • zamolancer
    zamolancer
    • 8 months ago

    do you have vector ?

    • 8 months ago
    1. smarthosting
      Contest Holder
      • 8 months ago

      yes we have the vector file.

      • 8 months ago
  • bootstrapjet
    bootstrapjet
    • 8 months ago

    Hit me up on chat

    • 8 months ago
  • kh1604
    kh1604
    • 8 months ago

    i have check the file and able to do it... can u pls knock me in chat?

    • 8 months ago

Show more comments

How to get started with contests

  • Post your contest

    Post Your Contest Quick and easy

  • Get tons of entries

    Get Tons of Entries From around the world

  • Award the best entry

    Award the best entry Download the files - Easy!

Post a Contest Now or Join us Today!