Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Converting a flat image into an interactive vector...

Discussion in 'Graphic Design Forum:' started by ncp87, Jan 24, 2016.

  1. ncp87

    ncp87 New Member

    Hi there,

    My question is in regards to the attached image. I want to be able to convert it into vector form, and then to make the image interactive so when I hover my mouse over a particular block or click it, that block is highlighted or it changes colour. Would anyone please be able to tell me the best way to do this? Is it possible on Adobe Illustrator?

    The end game is to link data to the image/seating chart, so when a user selects a particular block - only data relating to that block is displayed. I do not have much web/graphic design experience so I am a bit lost but trying to understand the best way to go about it.

    Any advice/guidance whatsoever would be highly appreciated. Thx.

    Attached Files:

  2. bigdave

    bigdave Moderator Staff Member

    Am I right in thinking that the end product is going to be included within a website? If this is the case, stop looking at illustrator and find yourself an experienced front end web developer.

    If you want this to be useful for booking seats etc.. you'll also need to find yourself an experienced back end developer ideally with a decent handle on e-commerce!
  3. hankscorpio

    hankscorpio Moderator Staff Member

    Yes Illustrator can make it vector.

    However, for the web you don't make images vector, they are raster, unless using SVG.

    Let's not get into that.

    The next step is then to develop the website, so that when you hover on a part of the image that the information comes up, that's up to the web developer to fix all that up.
  4. ncp87

    ncp87 New Member

    Many thanks for your responses. Ok so I understand that it will be with the web designer/developer to make the images interactive and integrated with data.

    What format should these images be in though? I am planning to use Illustrator to create a number of seating charts (like the 1 attached) from scratch, but I'm a bit confused about what format I should be saving them in so that when I hand it over to the web designers/developers, they are able to integrate them the way I described above. Sorry if this is really obvious!
  5. Paul Murray

    Paul Murray Moderator Staff Member

    The ideal format would be SVG to allow scalability and code-control. However, SVG isn't completely supported by all/older browsers, and so a fall-back to a standard raster image would be required – a transparent PNG acting as a sprite-sheet would be my favoured option. I wouldn't export each chair individually as separate images as this will create an additional HTTP request for each chair image every time the page is loaded, essentially slowing down the loading process.

    SVG inserted as code rather than files would be faster, but as mentioned isn't completely supported just yet.

    Best thing to do is ask the developer/s how they would like the files. Be wary if they ask for individual images though as this would signal to me that perhaps they're
    inexperienced or looking to cut corners and get something working ASAP, without optimising.
    bigdave likes this.
  6. hankscorpio

    hankscorpio Moderator Staff Member

    I'd work in illustrator to create the diagrams.

    From there, you can export to many formats, PNG, JPEG, TIFF, PSD, SVG etc.

    As always, check with the person doing the work, as to what they want to receive.

    But get working in Illustrator to create the diagrams, by all means, get going.
  7. ncp87

    ncp87 New Member

    That's great - thanks so much for your attention!

    With regards to the attached seating chart, my plan was to re-create it from scratch by using Illustrator. I wonder though if there is an efficient way to simply convert the flat GIF image into the format I need - the format being a vector image but with each block as a separate layer. I see that there are online GIF-->vector conversion sites like, but this would still result in a flat image. Sorry If I am asking the same question again!
  8. Paul Murray

    Paul Murray Moderator Staff Member

    You can convert images to vector in Illustrator using the 'live trace' tool. Some images convert better than others though, and your example won't convert too well due to overlapping text in places.

    To recreate this in Illustrator would be a pretty quick job for someone who knows what they're doing, maybe an hour at most since the seating plan is actually mirrored. Essentially you create the top or bottom section, then mirror it along the horizontal axis and you're done.
  9. skarekrow

    skarekrow Member

    I could re draw that as a vector for you no problems. It's what I do.

  10. Designdio

    Designdio New Member

    You can do it easily using Adobe Flash, but still flash is not supported in mobile and moreover is towards its end, so its better that you use HTML 5/CSS 3 and javascript. Once you recreate the whole thing in illustrator, go to File->Save As and choose SVG in file type option. SVG files are interactive and usable in web designing.
  11. ncp87

    ncp87 New Member

    Really appreciate all the advice - thank you so much! So I am going to start with Illustrator and will then figure out the correct end-format once I have a web designer on board, but sounds like SVG will be the best option! Thanks to you all :)

Share This Page