SVG Map Creation

A full SVG Map Creation Guide can be downloaded here.

Intro

ACA maps are where function meets form, and are the starting point of any conversation between a user and the platform.

A bespoke map is like a tailored suit or custom jewellery piece - you can elevate something simple by perfecting the details which takes the final product to the next level. The choices you make along the way will define the story you tell with the finished product. This guide will step you through the process in creating a map that is easy to use and visually effective.

When going custom you’ll get to choose from a range of details, which can really elevate your suit to the next level. Linings, button colours and stitching choices can all be made. This is much like the maps ACA designs for its clients, we take your average engineering map and we give it a makeover to impress the user.

Step 1 - Obtain Floor Plans

Get architectural floor plan from client and branding colours (if provided).

Step 2 - Create new Drawing

Setup file in Adobe Illustrator. Open Adobe Illustrator> file new> setup as A4 landscape document> one artboard>name your file “client_map_level” and select create.

Step 3 - Load Floor Plan

Start by creating a new layer on the artboard and place the architectural floor plan, select embed to ensure the image is saved with the map and lock the layer.

Be sure to name layer "original map"

Step 4 - Creating Floors

In a new layer start outlining your architectural floor plan, fill in shape with colour (as outlined by brand guidelines), lock the layer and name layer “outline”

Step 5 - Floor Shadows

Copy and paste outline and fill in with colour (new layer) and lock the layer - name layer “shadow”. Ensure this shape is shifted to the side to give a shadow effect to the “outline” layer.

Step 6 - Outlining Floors

In a new layer, unlock the architectural floor plan and place the architectural floor plan on the top layer but opacity turned down to 40%, begin outlining the rooms. Be sure to lock the map to ensure it doesn’t move. Once done combine room outlines with map outline and name layer “outline”.

Step 7 - Outlining Rooms

Once rooms have been outlined check the architectural floor plan to see which rooms or spaces are in use and use the “rectangle tool” (located on the side panel) to draw place square panels over spaces to identify as a room. If the room will be used use one colour to identify that space and for rooms that will not be used another colour. Label layer “spaces”.

Step 8 - Compare Floor Plans

To make things easier check the architectural floor plan and begin placing furniture and other features in designated spaces and rooms. If you already have them designed, if not you will need to create your own according to the brand guidelines.

Step 9 - Completing Layers

Make sure furniture and other elements such as plants are proportional to the room size and layout. Ensure plants are kept simple and are not composed of a gradient. Once complete name layer “plants and furniture”. Once complete lock layer.

Step 10 - Adding Bookable Rooms

In a new layer, using the “rectangle tool” begin create overlay for room bookings (bookable rooms), ensure the over layer is between 40%- 60% black. Room layer should be on a layer below lines (for appearances to look neater). Name layer “room bookings”.

Step 11 - Booking ID's

In this layer “room bookings” you will be required to give room ids, usually provided by the client. Clients usually give the room ids/ specification to which they would like. Capitalised or lower case, room and level number order etc... but all rooms should be labeled according to the following “area- level. room number-status”.

Step 12 - Adding Text

Once each room layer is labeled you can create another layer “text” here you will label each room and section of the map. This text should be Arial and anything larger than 6pt text size. For rooms use Arial bold or medium for other sections of the map use Arial regular or light. Make sure text colour is white or a colour that stands out against the map background.

Step 13 - Adding Icons

Lastly, on another layer, add icons to your map, icons should follow the branding guidelines e.g. style, colours, line weight/thickness etc... ensure colours chosen for icons also stand out against the map background.

Step 14 - Checking Names/ID

Once all elements are on your map go back to the booking layer and be sure to check the name and number of each room. We would recommend placing the names in order to ensure there are no double ups. Remember the SVG map will not work on the front end if two rooms have the same id.

Step 15 - Exporting

Go to file>export as>SVG> save to designated folder > ensure the following is correct: styling > internal CSS Font > SVG

Images > preserve Object IDs> Layer names Decimal > 3 Tick > minify and responsive Select > ok

Checklist

  • Client Architectural floor plans

  • Client room ids and room names

  • Client/brand guidelines

  • client/brand colour pallet

  • create furniture and plants that follow client/brand guidelines

  • Have the latest Adobe Illustrator CC2019

  • Name the file "client_map_level"

  • Name layers

  • Save As.. (Always)

  • Once you complete check room ids for no duplicates