Adobe Illustrator SVG map with interactive CSS

Question

I've been using Adobe Illustrator to create a map with different layers: 1. Map - this is basically a background image containing a map.jpg. 2. Borders - this layer defines borders of different regions. 3. Locations - this layer has some rectangles which I later want to use as anchors for points on the map.

I've added the Leaeflet javeacript and CSS files to my resources. I thought it'll be easy - I saved the file as SVG, clicked the code button and expected to add the code to my HTML page, then use CSS commands for "hover" events (each border in layer 2 has an id)... Except it doesn't work at all. I place the code on my page, and it renders as a completely blurred image, not even close to what I made in Illustrator.

Here is the code:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1600px"
     height="1175px" viewBox="0 0 1600 1175" enable-background="new 0 0 1600 1175" xml:space="preserve">
<g id="Layer_1">
    <g id="Map_2_">
        <g id="Map">

                <image overflow="visible" enable-background="new    " width="1600" height="1175" id="Map_1_" xlink:href="../../../../../../Nimrod/OneDrive/Pictures/WoT/Wheel of Time Map Final.jpg" >
            </image>
        </g>
    </g>
</g>
<g id="Borders_1_">
    <polygon id="Andor" fill="none" points="1200.25,708.5 1161.25,722.25 1125,741.25 1109.5,750 1101.75,758.25 1090.5,762.5 
        1081.5,773.75 1066.75,781 1071.25,762.5 1071.25,738.75 1063,722.25 1034.75,711.75 1017.25,710.5 958,729 951.25,729 943,732.25 
        913.25,737.75 910.75,722.25 893.75,715 875.75,715 853.75,702 849.25,700.75 835.25,692.75 817,690.5 779.25,678.5 772.75,674 
        738.75,659.25 720,655.25 704,657.25 690,665.25 693.5,624.5 707.75,583.5 702.25,558.5 702.25,512.75 716,512.75 727.5,530.25 
        727.5,563.25 746,589.5 766,589.5 770.25,596.75 785.5,587.5 794,589.5 802.25,605.75 815.75,609 831.25,605.75 849.25,619.75 
        873.5,625.75 881,638 889.75,639.25 896,645.25 908.25,639.25 947.12,638 969.25,630.5 1001.75,630.5 1177,615.25   "/>
    <polygon id="Cairhien" fill="none" points="1485.5,472 1448.83,566.67 1437.5,587.5 1389.17,597 1353.5,612.33 1310.17,640 
        1223.83,661.33 1204.5,661.33 1195.17,673.33 1177,593.67 1182.5,549.33 1198.5,509.67 1221.17,494 1267,472 1305.17,472 
        1448.83,458.33  "/>
    <polygon id="Saldaea" fill="none" points="1011.5,232.02 1009.83,243.35 1006.83,247.35 987.5,286.68 985.17,303.68 971.83,308.35 
        954.17,327.68 915.17,345.02 803.5,422.68 782.5,447.35 733.17,412.35 724.5,396.35 711.83,395.02 657.83,354.68 682.83,337.68 
        693.5,295.02 714.5,292.35 728.83,297.68 735.5,303.68 755.17,301.02 752.83,289.68 763.17,285.02 757.83,274.68 763.17,267.02 
        771.83,267.02 769.5,260 791.33,253.5 785.5,245.35 785.5,242.02 797.17,237.68 797.17,233.02 810.17,232.02 812.5,227.85 
        826.83,227.85 829.83,221.02 882.5,216.35 888.5,221.02 902.17,221.02 902.17,216.35 912.17,218.35 927.83,218.35 931.83,211.68 
        943.83,211.68 946.17,221.02 954.17,223.68 971.33,218.35 974.17,223.68 968.5,232.02 971.83,234.02    "/>
    <polygon id="Kandor" fill="none" points="1148.17,274.02 1155.17,315.02 1013.83,307.02 997.17,303.68 985.17,303.68 987.5,286.68 
        1006.83,247.35 1009.83,243.35 1011.5,232.02 1013.83,225.02 1030.5,221.02 1037.17,232.02 1055.83,230.35 1055.83,226.52 
        1060,230.35 1083,230.35 1077.83,225.02 1127.5,218.02 1137.5,225.02 1155.17,225.02   "/>
    <polygon id="Arafel" fill="none" points="1313.83,252.35 1311.83,261.68 1299.5,267.5 1273.5,298.68 1229.83,325.68 
        1153.17,340.02 1155.17,315.02 1148.17,274.02 1155.17,225.02 1172.17,227.68 1175.5,231.18 1188.5,226.52 1192.5,232.02 
        1204.5,230.35 1208.5,221.52 1218.5,226.52 1246.83,226.52 1242.5,232.02 1253.17,234.68 1265.17,240.02 1275.5,238.02 
        1284.5,240.02 1305.67,238.02    "/>
    <polygon id="Shienar" fill="none" points="1448.84,266.52 1451.17,294.35 1451.17,306.68 1437.5,306.68 1429.84,312.18 
        1409.84,309.43 1393.17,310.81 1341.84,334.35 1311.83,337.02 1276.84,340.02 1229.83,325.68 1273.5,298.68 1299.5,267.5 
        1311.83,261.68 1313.83,252.35 1312.83,250.59 1334.84,248.35 1366.84,243.02 1382.17,248.35 1404.17,245.68 1429.84,243.02 
        1448.84,248.35 1453.5,258.35    "/>
    <polygon id="TarValon_1_" fill="none" points="1208.5,478.34 1197,478.34 1180.83,471.68 1171.83,459.68 1171.83,436.34 
        1177,431.01 1200,445 1206.5,456.5   "/>
    <polygon id="Tear" fill="none" points="1444.5,1000.68 1436.83,1021.35 1427.17,1022.68 1420.17,1028.35 1410.17,1028.35 
        1401.83,1022.68 1393.5,1022.68 1383.83,1009.35 1380.83,995.01 1383.83,982.35 1383.83,969.68 1377.83,963.22 1356.83,961.1 
        1338.5,965.35 1332.83,952.01 1321.17,952.01 1309.17,941.01 1293.17,952.01 1293.17,955.35 1283.83,963.51 1256.5,963.51 
        1248.83,958.68 1170.67,968.35 1168.17,949.01 1173.17,930.35 1189.83,911.68 1222.83,892.01 1269.17,882.01 1332.83,882.01 
        1347.67,887.01 1359.17,889.35 1393.5,909.01 1397.67,925.35 1410.17,941.01 1417.67,945.5 1428.83,958.68 1420.17,965.35 
        1420.17,976.01 1415.17,982.35 1415.17,986.35 1427.17,990.01 1427.17,995.01  "/>
    <polygon id="Illian" fill="none" points="1137.17,979.35 1110.17,988.35 1094.17,986.68 1079.83,996.35 1071.5,1010.35 
        1055.5,1010.35 1049.17,1012.68 1058.83,1031 1046.5,1055.35 1036.33,1062.35 1011.5,1057.35 994.17,1028.35 1000.5,991.52 
        997.33,979.35 998.92,972.02 981.83,957.35 969.83,952.02 955.5,952.02 945.12,945.5 950.31,934 950.31,925.02 968.5,872.35 
        975.83,866.35 975.83,859.35 990.38,859.35 1021.5,850.68 1051.17,877.02 1082.5,903.35 1087.17,903.35 1110.17,935.35  "/>
    <polygon id="Altara" fill="none" points="973.6,858.43 972.54,869.05 966.8,874.3 950.31,925.02 942.83,945.5 901.83,945.5 
        895.83,941.81 888.12,948.92 888.12,968.01 901.83,980.67 887.09,996 846.5,1000.01 829.83,1011.01 809.83,1002.67 796.5,1021.34 
        778.83,1024.01 774.17,1015.01 765.17,1009.34 769.67,992.01 769.67,988.34 778.83,976.67 807.83,958.47 813.83,934 824.5,905.01 
        819.17,863.74 848.5,829.34 846.5,792.01 829.94,775.67 807.5,765.33 789.8,744.1 765.83,702 742.39,684.65 720,655.25 
        742.39,660.83 779.25,678.5 819.48,690.81 840.41,695.13 853.75,702 870.88,712.12 883.59,715 895.83,715 910.75,722.25 
        913.25,737.75 959.46,728.54 942.83,770.67 939.83,805.34     "/>
</g>
<g id="Capitals_1_">
    <g id="Capitals">
        <rect id="BandarEban" x="454" y="450" fill="none" width="23" height="23"/>
        <rect id="Falme" x="385.5" y="623.5" fill="none" width="23" height="21"/>
        <rect id="Tanchico" x="429.5" y="761" fill="none" width="23" height="23"/>
        <rect id="Amador" x="664" y="859.5" fill="none" width="20" height="23"/>
        <rect id="EbouDar" x="771.5" y="996" fill="none" width="23" height="23"/>
        <rect id="Jehannah" x="721.5" y="727" fill="none" width="23" height="23"/>
        <rect id="Lugard" x="968.5" y="772.5" fill="none" width="23" height="23"/>
        <rect id="Illiancity" x="1020" y="1031" fill="none" width="23" height="23"/>
        <rect id="Tearcity" x="1209.5" y="922.5" fill="none" width="23" height="23"/>
        <rect id="Mayene" x="1446.5" y="1007.5" fill="none" width="23" height="23"/>
        <rect id="FarMadding" x="1119" y="801.5" fill="none" width="23" height="23"/>
        <rect id="Caemlyn" x="1098" y="678" fill="none" width="23" height="23"/>
        <rect id="Cairhiencity" x="1252" y="546" fill="none" width="23" height="23"/>
        <rect id="TarValon" x="1177" y="445" fill="none" width="23" height="23"/>
        <rect id="Maradon" x="871" y="253.5" fill="none" width="23" height="23"/>
        <rect id="Chachin" x="1060" y="260" fill="none" width="23" height="23"/>
        <rect id="SholArbela" x="1197" y="260" fill="none" width="23" height="23"/>
        <rect id="FalMoran" x="1338.5" y="267.5" fill="none" width="20" height="20.5"/>
    </g>
</g>
</svg>

And this is how it renders: enter image description here Any ideas why this is happening?

Like this - http://jsfiddle.net/7tdbrpuf/1/ I've used an image which is the same size as the dimensions you listed in the SVG but I'm wondering if you have done the same. — Paulie_D, Mar 09 '15 at 12:38
@Paulie_D I hope this is what you wanted: http://jsfiddle.net/96wypfum/1/ NOTE: I've pasted the CSS and JS from the Leaflet files, which are opensource and not my own. — Nimrod Yanai, Mar 09 '15 at 12:45

score 0 · Accepted Answer · answered Mar 09 '15 at 12:59

The issue here, I suspect, is the actual image. You haven't included a proper link so it won't display properly.

What I think it's trying to do is show you the "missing image icon" at 1600x1175 so it's massively blown up.

I found the image with a google search and have included it into the example.

You should, of course, ensure that you have the rights to use this image and host it on your own server rather than hotlinking as I have done here.

#Arafel {
  fill: rgba(255, 0, 0, 0.2);
}
#Kandor {
  fill: rgba(255, 255, 255, 0.55);
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1600 1175" enable-background="new 0 0 1600 1175" xml:space="preserve">
  <g id="Layer_1">
    <g id="Map_2_">
      <g id="Map">

        <image overflow="visible" enable-background="new    " width="1600" height="1175" id="Map_1_" xlink:href="http://1.bp.blogspot.com/_SniTwfm5BwE/TD5ntu8-F8I/AAAAAAAACnY/LaZH__Hvn3M/s1600/Wheel+of+Time+Map+Final.jpg">
        </image>
      </g>
    </g>
  </g>
  <g id="Borders_1_">
    <polygon id="Andor" fill="none" points="1200.25,708.5 1161.25,722.25 1125,741.25 1109.5,750 1101.75,758.25 1090.5,762.5 
        1081.5,773.75 1066.75,781 1071.25,762.5 1071.25,738.75 1063,722.25 1034.75,711.75 1017.25,710.5 958,729 951.25,729 943,732.25 
        913.25,737.75 910.75,722.25 893.75,715 875.75,715 853.75,702 849.25,700.75 835.25,692.75 817,690.5 779.25,678.5 772.75,674 
        738.75,659.25 720,655.25 704,657.25 690,665.25 693.5,624.5 707.75,583.5 702.25,558.5 702.25,512.75 716,512.75 727.5,530.25 
        727.5,563.25 746,589.5 766,589.5 770.25,596.75 785.5,587.5 794,589.5 802.25,605.75 815.75,609 831.25,605.75 849.25,619.75 
        873.5,625.75 881,638 889.75,639.25 896,645.25 908.25,639.25 947.12,638 969.25,630.5 1001.75,630.5 1177,615.25   " />
    <polygon id="Cairhien" fill="none" points="1485.5,472 1448.83,566.67 1437.5,587.5 1389.17,597 1353.5,612.33 1310.17,640 
        1223.83,661.33 1204.5,661.33 1195.17,673.33 1177,593.67 1182.5,549.33 1198.5,509.67 1221.17,494 1267,472 1305.17,472 
        1448.83,458.33  " />
    <polygon id="Saldaea" fill="none" points="1011.5,232.02 1009.83,243.35 1006.83,247.35 987.5,286.68 985.17,303.68 971.83,308.35 
        954.17,327.68 915.17,345.02 803.5,422.68 782.5,447.35 733.17,412.35 724.5,396.35 711.83,395.02 657.83,354.68 682.83,337.68 
        693.5,295.02 714.5,292.35 728.83,297.68 735.5,303.68 755.17,301.02 752.83,289.68 763.17,285.02 757.83,274.68 763.17,267.02 
        771.83,267.02 769.5,260 791.33,253.5 785.5,245.35 785.5,242.02 797.17,237.68 797.17,233.02 810.17,232.02 812.5,227.85 
        826.83,227.85 829.83,221.02 882.5,216.35 888.5,221.02 902.17,221.02 902.17,216.35 912.17,218.35 927.83,218.35 931.83,211.68 
        943.83,211.68 946.17,221.02 954.17,223.68 971.33,218.35 974.17,223.68 968.5,232.02 971.83,234.02    " />
    <polygon id="Kandor" fill="none" points="1148.17,274.02 1155.17,315.02 1013.83,307.02 997.17,303.68 985.17,303.68 987.5,286.68 
        1006.83,247.35 1009.83,243.35 1011.5,232.02 1013.83,225.02 1030.5,221.02 1037.17,232.02 1055.83,230.35 1055.83,226.52 
        1060,230.35 1083,230.35 1077.83,225.02 1127.5,218.02 1137.5,225.02 1155.17,225.02   " />
    <polygon id="Arafel" fill="none" points="1313.83,252.35 1311.83,261.68 1299.5,267.5 1273.5,298.68 1229.83,325.68 
        1153.17,340.02 1155.17,315.02 1148.17,274.02 1155.17,225.02 1172.17,227.68 1175.5,231.18 1188.5,226.52 1192.5,232.02 
        1204.5,230.35 1208.5,221.52 1218.5,226.52 1246.83,226.52 1242.5,232.02 1253.17,234.68 1265.17,240.02 1275.5,238.02 
        1284.5,240.02 1305.67,238.02    " />
    <polygon id="Shienar" fill="none" points="1448.84,266.52 1451.17,294.35 1451.17,306.68 1437.5,306.68 1429.84,312.18 
        1409.84,309.43 1393.17,310.81 1341.84,334.35 1311.83,337.02 1276.84,340.02 1229.83,325.68 1273.5,298.68 1299.5,267.5 
        1311.83,261.68 1313.83,252.35 1312.83,250.59 1334.84,248.35 1366.84,243.02 1382.17,248.35 1404.17,245.68 1429.84,243.02 
        1448.84,248.35 1453.5,258.35    " />
    <polygon id="TarValon_1_" fill="none" points="1208.5,478.34 1197,478.34 1180.83,471.68 1171.83,459.68 1171.83,436.34 
        1177,431.01 1200,445 1206.5,456.5   " />
    <polygon id="Tear" fill="none" points="1444.5,1000.68 1436.83,1021.35 1427.17,1022.68 1420.17,1028.35 1410.17,1028.35 
        1401.83,1022.68 1393.5,1022.68 1383.83,1009.35 1380.83,995.01 1383.83,982.35 1383.83,969.68 1377.83,963.22 1356.83,961.1 
        1338.5,965.35 1332.83,952.01 1321.17,952.01 1309.17,941.01 1293.17,952.01 1293.17,955.35 1283.83,963.51 1256.5,963.51 
        1248.83,958.68 1170.67,968.35 1168.17,949.01 1173.17,930.35 1189.83,911.68 1222.83,892.01 1269.17,882.01 1332.83,882.01 
        1347.67,887.01 1359.17,889.35 1393.5,909.01 1397.67,925.35 1410.17,941.01 1417.67,945.5 1428.83,958.68 1420.17,965.35 
        1420.17,976.01 1415.17,982.35 1415.17,986.35 1427.17,990.01 1427.17,995.01  " />
    <polygon id="Illian" fill="none" points="1137.17,979.35 1110.17,988.35 1094.17,986.68 1079.83,996.35 1071.5,1010.35 
        1055.5,1010.35 1049.17,1012.68 1058.83,1031 1046.5,1055.35 1036.33,1062.35 1011.5,1057.35 994.17,1028.35 1000.5,991.52 
        997.33,979.35 998.92,972.02 981.83,957.35 969.83,952.02 955.5,952.02 945.12,945.5 950.31,934 950.31,925.02 968.5,872.35 
        975.83,866.35 975.83,859.35 990.38,859.35 1021.5,850.68 1051.17,877.02 1082.5,903.35 1087.17,903.35 1110.17,935.35  " />
    <polygon id="Altara" fill="none" points="973.6,858.43 972.54,869.05 966.8,874.3 950.31,925.02 942.83,945.5 901.83,945.5 
        895.83,941.81 888.12,948.92 888.12,968.01 901.83,980.67 887.09,996 846.5,1000.01 829.83,1011.01 809.83,1002.67 796.5,1021.34 
        778.83,1024.01 774.17,1015.01 765.17,1009.34 769.67,992.01 769.67,988.34 778.83,976.67 807.83,958.47 813.83,934 824.5,905.01 
        819.17,863.74 848.5,829.34 846.5,792.01 829.94,775.67 807.5,765.33 789.8,744.1 765.83,702 742.39,684.65 720,655.25 
        742.39,660.83 779.25,678.5 819.48,690.81 840.41,695.13 853.75,702 870.88,712.12 883.59,715 895.83,715 910.75,722.25 
        913.25,737.75 959.46,728.54 942.83,770.67 939.83,805.34     " />
  </g>
  <g id="Capitals_1_">
    <g id="Capitals">
      <rect id="BandarEban" x="454" y="450" fill="none" width="23" height="23" />
      <rect id="Falme" x="385.5" y="623.5" fill="none" width="23" height="21" />
      <rect id="Tanchico" x="429.5" y="761" fill="none" width="23" height="23" />
      <rect id="Amador" x="664" y="859.5" fill="none" width="20" height="23" />
      <rect id="EbouDar" x="771.5" y="996" fill="none" width="23" height="23" />
      <rect id="Jehannah" x="721.5" y="727" fill="none" width="23" height="23" />
      <rect id="Lugard" x="968.5" y="772.5" fill="none" width="23" height="23" />
      <rect id="Illiancity" x="1020" y="1031" fill="none" width="23" height="23" />
      <rect id="Tearcity" x="1209.5" y="922.5" fill="none" width="23" height="23" />
      <rect id="Mayene" x="1446.5" y="1007.5" fill="none" width="23" height="23" />
      <rect id="FarMadding" x="1119" y="801.5" fill="none" width="23" height="23" />
      <rect id="Caemlyn" x="1098" y="678" fill="none" width="23" height="23" />
      <rect id="Cairhiencity" x="1252" y="546" fill="none" width="23" height="23" />
      <rect id="TarValon" x="1177" y="445" fill="none" width="23" height="23" />
      <rect id="Maradon" x="871" y="253.5" fill="none" width="23" height="23" />
      <rect id="Chachin" x="1060" y="260" fill="none" width="23" height="23" />
      <rect id="SholArbela" x="1197" y="260" fill="none" width="23" height="23" />
      <rect id="FalMoran" x="1338.5" y="267.5" fill="none" width="20" height="20.5" />
    </g>
  </g>
</svg>

I've also removed the SVG dimensions from the SVG code so it's now responsive.

That's brilliant! But where do you place the CSS code? I tried placing it in the external CSS file with a :hover command but it doesn't work... — Nimrod Yanai, Mar 09 '15 at 13:32
Also - this is SVG, so there shouldn't be a problem for me to put the whole thing in a smaller
right? It'll just rescale it? — Nimrod Yanai, Mar 09 '15 at 13:37
Well I don't know why but the :hover function doesn't work for me. The "fill" function works perfectly, but the moment I add :hover it stops working... http://jsfiddle.net/ha66jdga/ — Nimrod Yanai, Mar 09 '15 at 13:52
Oh and about the rights - this is a school project, it will be uploaded to a closed university server and deleted after it is graded. It's not for any sort of public use. — Nimrod Yanai, Mar 09 '15 at 13:59
Found the answer to the :hover problem here: http://stackoverflow.com/questions/9208244/how-to-hover-over-an-svg-rect And that closes this chapter! Thank you @Paulie_D Paulie_D! You're awesome. — Nimrod Yanai, Mar 09 '15 at 14:03

Adobe Illustrator SVG map with interactive CSS

1 Answers1