Export SVG from Illustrator, import to Dreamweaver with selections

Explorer ,
Oct 26, 2019 Oct 26, 2019

Copy link to clipboard

Copied

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

TOPICS
Bootstrap , Code , How to , Import and export

Views

293

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 26, 2019 Oct 26, 2019

Copy link to clipboard

Copied

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

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 26, 2019 Oct 26, 2019

Copy link to clipboard

Copied

LATEST

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines