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 2:
Change Layout 1 to "lrs-pins"
Step 3:
- Keep font color black color #000000 if want the table number visible.
- Change the font color to table color #D4D4D0 if don't want table number to visible
Step 4:
- Export Export As JPG - File/Export/Export As...
- File name "StoreName_Planogram. JPG"
- Choose JPEG and select "Use Artboards"
- Color Model: RGB
- Quality: 10
- Resolution: 200~300dpi
- Select "Embed ICC Profile: US Web Coated"
Step 5:
- Delete vector graphics and insert "StoreName_Planogram. JPG" to map layer
Step 6:
- Save as SVG
- Save as
- Make sure select "Embed"
- Click "OK"
Step 7:
- Open "SVG Code.html" in Dreamweaver
- Open "StoreName_SVGPlanogram.SVG" in Dreamweaver
- Copy xmlns:lrs="http://www.lrsus.com" and past it before xmlns:rdf="http://www.w3.org.....
- Go to Edit > Find and Replace
- Type "lrs-pins" in Find section then click Find Next
- 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>
- After done with all the numbers, click "save" and close SVG file from Dreamweaver
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
NOTE - Attached in this article is a sample SVG file. Contact LRS at 1-800-437-4996 if you have any questions or issues.