Export SVG from Illustrator, import to Dreamweaver with selections

Forum|Forum|6 years ago
October 26, 2019
2 replies
498 views

I am trying to use an SVG exported from Illustrator and imported to Dreamweaver. And somewhere in that process, I must select areas (rectangles) which connect to URL tags.

Can anyone help with this?

Rick

This topic has been closed for replies.

Nancy OShea

Community Expert

Responsive Image Map with vector shape (rect) hotspots.

Copy & paste code below into a new blank document and save as SVGMap.html. Read the code and comments. Feel free to use any size image. Just make sure to change viewBox values to match. Post back if you have questions.

<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Responsive Image Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="X-UA-Compatible" content="IE=edge">

<style>
.mapContainer {
width: 70%;
margin: 0 auto;
}

#myMap {
position: relative;
width: 100%;
padding-bottom: 77%;
vertical-align: middle;
margin: 0;
overflow: hidden;
}

#myMap svg {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}

/**vector shapes**/
#myMap rect {
fill: #FFF;
opacity:0.5;
}

/** highlight shapes on hover, click or tab **/
#myMap a:hover rect,
#myMap a:active rect,
#myMap a:focus rect{ opacity:1; }
</style>
</head>

<body>
<div class="mapContainer">
<h3>Responsive Image Map </h3>

<figure id="myMap">
<svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="0 0 1200 800" preserveAspectRatio="xMinYMin meet"> 
<!--Your JPG or PNG map  goes here-->
<image width="1200" height="800" xlink:href="https://dummyimage.com/1200x800/F00/000.png&text=Your+JPG+or+PNG+Image+Here"> </image>
<!--1st outbound link--> 
<a xlink:href="https://google.com" target="_blank"><title>Google.com</title>
<!--vector shape 1, 
change values as needed-->
<rect x="20" y="20" width="450" height="300"/>
</a> 

<!--2nd outbound link--> 
<a xlink:href="https://example.com"> 
<title>Example.com</title>
<!--vector shape 2-->
<rect x="700" y="20" width="450" height="300"/>
</a> 

<!--3rd outbound link--> 
<a xlink:href="https://yahoo.com"> 
<title>Yahoo.com</title>
<!--vector shape 3-->
<rect x="20" y="450" width="450" height="300"/>
</a> 

<!--4th outbound link--> 
<a xlink:href="https://bing.com"> 
<title>Bing.com</title>
<!--vector shape 4-->
<rect x="700" y="450" width="450" height="300"/>
</a> 
</svg>
</figure>
</div>
</body>
</html>

Nancy O'Shea— Product User & Community Expert

BenPleysier

Community Expert

See here https://helpx.adobe.com/au/illustrator/how-to/export-svg.html

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded