map.svg

<svg version="1.1" id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 4800 2720" style="enable-background:new 0 0 4800 2720;" xml:space="preserve">
<style type="text/css">
    .st0{
        stroke:#000000; /* so you can see them */
        stroke-width: 3px;
        transition: all 0.3s ease-in-out;
        opacity: 0.5;
    }
    #YugoslaviaShape {
        fill: url(#YugoslaviaPattern); /* doesn't seem to work */
    }
    #BosniaShape {
        fill: url(#ColorPattern); /* doesn't seem to work either */
    }
    #TurkeyShape {
        fill: url(#TurkeyPattern);
    }
    #SyriaShape {
        fill: url(#SyriaPattern);
    }
    #SyriaContestedShape {
        fill: url(#SryiaContestedPattern);
    }
    #YugoslaviaShape:hover,
    #BosniaShape:hover,
    #TurkeyShape:hover,
    #SyriaShape:hover,
    #SyriaContestedShape:hover {
        opacity: 1;
    }
</style>
<defs>
    <pattern id="YugoslaviaPattern" x="0" y="0" width="4800" height="2720">
        <image xlink:href="yugoslavia.jpg" width="698" height="714" />             
    </pattern>
    <pattern id="BosniaPattern" x="0" y="0" width="4800" height="2720">
        <image xlink:href="bosnia.jpg" width="281" height="319" />             
    </pattern>
    <pattern id="TurkeyPattern" x="0" y="0" width="4800" height="2720">
        <image xlink:href="turkey.jpg" width="1767" height="774" />             
    </pattern>
    <pattern id="SyriaPattern" x="0" y="0" width="4800" height="2720">
        <image xlink:href="syria.jpg" width="634" height="638" />             
    </pattern>
    <pattern id="SyriaContestedPattern" x="0" y="0" width="4800" height="2720">
        <image xlink:href="syriacontested.jpg" width="30" height="87" />             
    </pattern>
    <pattern id="ColorPattern" x="0" y="0" width="4800" height="2720">
        <image xlink:href="map_color_2560.jpg" width="4800" height="2720" />             
    </pattern>
</defs>
<image xlink:href="map_bw_2560.jpg" width="4800" height="2720" id="bw" />
<path id="SyriaContestedShape" class="st0" d="M2898.87,1878.33c0,0-0.63,9.42-0.63,11.79s1.05,8.79,3.42,11.86
   …
    C2894.28,1884.89,2896.37,1880.51,2898.87,1878.33z"/>
<path id="YugoslaviaShape" class="st0" d="M1719.87,698.1c-5.58-2.98-6.88-6.7-10.42-13.4c-3.53-6.7-8.19-8.19-11.16-10.23
    …
    C1723.59,707.03,1725.45,701.08,1719.87,698.1z"/>
<path id="SyriaShape" class="st0" d="M3472.98,1372.52c0,4.28,4.47,10.98,4.47,10.98s-0.56,2.42-1.3,3.91
    …
    s8.56-13.4,10.42-13.02c1.86,0.37,8.56,0.19,10.42,1.3C3469.45,1365.26,3472.98,1368.24,3472.98,1372.52z"/>
<path id="TurkeyShape" class="st0" d="M2148.24,861.82c-4.73-0.41-7.95-1.12-9.21,0s-2.23,1.38-3.63-0.56c-1.4-1.95-4.88-1.95-5.58-0.69
    …
    C2170.01,897.26,2158.01,862.66,2148.24,861.82z"/>
<path id="BosniaShape" class="st0" d="M1227.5,448.5c-8.99-0.4-9-3-9-6s-5-5-6-10s-1.47-10.68-7.98-11.14s-11.44,1.4-12.56,3.91
    …
    C1234.43,442.38,1233.27,448.76,1227.5,448.5z"/>
</svg>