Export SVG from Illustrator, import to Dreamweaver with selections

Report · Oct 26, 2019

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

Report · Oct 26, 2019

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

Wappler, the only real Dreamweaver alternative.

Report · Oct 26, 2019

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

Export SVG from Illustrator, import to Dreamweaver with selections