Follow

SVG format layout - Creation Instructions

Use Adobe Illustrator, Dreamweaver and Inkscape to create Ai and SVG planogram. Please follow the steps below:

Step 1:

Create the regular Ai planogram.
- Vector graphics in map layer
- Make table color #D4D4D0
- Create NEW layer for table number (Layout 1)
- Save file to StoreName_Planogram.Ai

Step_01.png

Step_01.2.png

Step 2:

Change Layout 1 to "lrs-pins"

Step_02.2.png

Step 3:

- Keep font color black color #000000 if want the table number visible.

Step_03.1.png

- Change the font color to table color #D4D4D0 if don't want table number to visible

Step_03.2.png

Step 4: 

- Export Export As JPG - File/Export/Export As...

Step_04.png

- File name "StoreName_Planogram. JPG"
- Choose JPEG and select "Use Artboards"

Step_05.png

- Color Model: RGB
- Quality: 10
- Resolution: 200~300dpi
- Select "Embed ICC Profile: US Web Coated"

Step_06.png

Step 5:

- Delete vector graphics and insert "StoreName_Planogram. JPG" to map layer

Step_07.2.png

Step 6:

- Save as SVG

Step_08.2.png

- Save as 

Step_09.png

- Make sure select "Embed"
- Click "OK"

Step_10.png

Step 7:

- Open "SVG Code.html" in Dreamweaver

Step_14.png

- Open "StoreName_SVGPlanogram.SVG" in Dreamweaver
- Copy xmlns:lrs="http://www.lrsus.com" and past it before xmlns:rdf="http://www.w3.org.....

Step_11.png

- Go to Edit > Find and Replace
- Type "lrs-pins" in Find section then click Find Next

Step_12.png

- You will find <g id="lrs-pins"> which is tale number layer
- Copy lrs:locationName="23" lrs:isLocation="true" and past in <text>
- Change lrs:locationName="23" the number to match the number between <text>Number</text>
For example: <text transform="matrix(1 0 0 1 122.5606 346.6004)"lrs:locationName="49"  lrs:isLocation="true" class="st1 st2 st3">49</text>

Step_13.png

- After done with all the numbers, click "save" and close SVG file from Dreamweaver

Step_15.png

Step 8:

- Open "StoreName_SVGPlanogram.SVG" in Inkscape
(Free Inkscape software download link: https://inkscape.org/en/)

- File > Save as
- Select "Plain SVG" then Click "Save" to replace "StoreName_SVGPlanogram.SVG"
- Now SVG file is complete and ready to upload

Step_16.png

 NOTE - Attached in this article is a sample SVG file. Contact LRS at 1-800-437-4996 if you have any questions or issues.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk