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 http://snapsvg.io/demos/#mascot

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.

Public Clarification Board

  • smarthosting
    Contest Holder
    • 7 years ago

    uploaded ai file and a powerpoint presentation for clearer idea.

    • 7 years ago
  • ronilto1001
    ronilto1001
    • 7 years ago

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

    • 7 years ago
    1. smarthosting
      Contest Holder
      • 7 years ago

      uploaded ai file and a powerpoint presentation for clearer idea.

      • 7 years ago
  • khanfarhaan
    khanfarhaan
    • 7 years 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 :)

    • 7 years ago
    1. smarthosting
      Contest Holder
      • 7 years ago

      please submit an entry.

      • 7 years ago
    2. smarthosting
      Contest Holder
      • 7 years ago

      uploaded ai file and a powerpoint presentation for clearer idea.

      • 7 years ago
  • smarthosting
    Contest Holder
    • 7 years ago

    I have uploaded the ai file.

    • 7 years ago
  • chimera28
    chimera28
    • 7 years ago

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

    • 7 years ago
    1. chimera28
      chimera28
      • 7 years ago

      or "animate SVG using SNAP.SVG API.

      • 7 years ago
    2. smarthosting
      Contest Holder
      • 7 years ago

      Thanks. My bad. Tried to change but unable.

      • 7 years ago
  • krisgraphic
    krisgraphic
    • 7 years 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.

    • 7 years ago
  • krisgraphic
    krisgraphic
    • 7 years 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.

    • 7 years ago
  • krisgraphic
    krisgraphic
    • 7 years 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.

    • 7 years ago
  • smarthosting
    Contest Holder
    • 7 years 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

    • 7 years ago
    1. krisgraphic
      krisgraphic
      • 7 years 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.

      • 7 years ago
    2. mattsrinc
      mattsrinc
      • 7 years 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.

      • 7 years ago
  • ronilto1001
    ronilto1001
    • 7 years ago

    Please, check #7. Thanks.

    • 7 years ago
  • BRgraphix
    BRgraphix
    • 7 years ago

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

    • 7 years ago
  • smarthosting
    Contest Holder
    • 7 years ago

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

    • 7 years ago
    1. smarthosting
      Contest Holder
      • 7 years ago

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

      • 7 years ago
    2. kh1604
      kh1604
      • 7 years ago

      You can contact now via my Entry #6

      • 7 years ago
  • krisgraphic
    krisgraphic
    • 7 years ago

    Please look #5 full explain

    • 7 years ago
    1. krisgraphic
      krisgraphic
      • 7 years ago

      You can contact me, thanks

      • 7 years ago
  • krisgraphic
    krisgraphic
    • 7 years 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.

    • 7 years ago
  • harunk
    harunk
    • 7 years ago

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

    • 7 years ago
    1. smarthosting
      Contest Holder
      • 7 years ago

      we have the vector file.

      • 7 years ago
    2. smarthosting
      Contest Holder
      • 7 years ago

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

      • 7 years ago
  • zamolancer
    zamolancer
    • 7 years ago

    do you have vector ?

    • 7 years ago
    1. smarthosting
      Contest Holder
      • 7 years ago

      yes we have the vector file.

      • 7 years ago
  • bootstrapjet
    bootstrapjet
    • 7 years ago

    Hit me up on chat

    • 7 years ago
  • kh1604
    kh1604
    • 7 years ago

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

    • 7 years 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!