1

I have created one svg door image using Adobe illustrator.The image has 3 components

  1. Door body
  2. Glass part in center of the door
  3. Door handle. >>

enter image description here

I want change the this 3 attributes by clicking buttons like changing handle, color, body material etc. I have open this svg file in dreamweaver and it's looking weird with long image links and codes. I don't know where to start with.

Thanks

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version:  6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0  0 612 792" xml:space="preserve">
  <rect x="146.889" y="134.444" fill="#6B4520" stroke="#000000" stroke-   miterlimit="10" width="328.889" height="487.777"/>
<path fill="#BDE5F1" stroke="#000000" stroke-miterlimit="10"  d="M372.998,351.667c0,38.2-25.577,67-66.998,67
c-41.421,0-71.002-28.8-71.002-67c0-38.2,27.579-64.667,69-  64.667C345.419,287,372.998,313.467,372.998,351.667z"/>
 <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="155.665"    y1="352.25" x2="174.25" y2="352.25">
  <stop  offset="0" style="stop-color:#FFFFFF"/>
  <stop  offset="0" style="stop-color:#603913"/>
  <stop  offset="0" style="stop-color:#000000"/>
  <stop  offset="0.0161" style="stop-color:#000000"/>
  <stop  offset="0.3333" style="stop-color:#D9CDC0"/>
  <stop  offset="0.5161" style="stop-color:#000000"/>
  <stop  offset="0.8763" style="stop-color:#FFFFFF"/>
  </linearGradient>
  <polygon fill="url(#SVGID_1_)" stroke="#000000" stroke-miterlimit="10"  points="171.333,430.556 164.958,434 159.111,430.556 
155.665,344.667 159.111,272.778 164.958,270.5 171.333,272.778 174.25,344.25  "/>
  </svg>
Improve this question
3
  • I don't know about DreamWeaver dealing with SVG but you can add to your question the SVGs code from Illustrator and we could help you to handle this. Commented Feb 15, 2016 at 8:07
  • Thanks Mosh..I am using illustrator cs6. in export option there is no .svg format, but I can Save As svg file format.The svg format we can edit the styles,fill color etc but in my case the code looks very big. Commented Feb 15, 2016 at 8:22
  • It's make sense because your image contains many elements. You can create a bin with all your code and we help you. Just keep it mind to group the elements you want to replace like handle etc. Commented Feb 15, 2016 at 8:31

1 Answer 1

Reset to default
3

It's reasonably simple, the most important part is you include the svg within the html not simply as an image src attribute. The following is not dreamweaver specific.

For example:

<body>
   <!-- this won't work well -->
   <img src="/images/door.svg>
    ...
   <!-- this will work very well -->
    <svg>
        <path></path>
        <path></path>
    </svg>
    ...
</body>

Now just like any other element you can give the svg and path elements id's and classes

<svg id="door">
    <path id="handle"></path>
    <path id="window"></path>
</svg>

From here you can use event listeners to those specific elements for example (with jQuery) to run off other functions for the customization of these svg elements.

$('#handle').on('click', function(){
    $(this).css('fill', 'blue') // change path fill to blue
})

path's and other svg elements can more or less be styled with css which makes this a lot easier.

This isn't a copy and paste answer, but I hope it helps you!

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Yes Brod .This is what im a lookin for.now it has more clarity, I have som more qstion over that,In svg format can we have separate control over each elemnts? let me clear <svg id="door"> <path id="handle"></path> <path id="window"></path> </svg> here can I filter out each element ? since it is exported as a single svg image? thanks a lot brod.
I like this solution +1. I would not user jquery with svg, in my expirience there are a lot of cases where they will not work together.
@Tony, svg files generally look something like the code I wrote in the answer (although with a lot more information) - try opening the svg file up within a text/code editor, dreamweaver might be doing something strange which prevents you from seeing the code.
@Persijn yeah, I'm not a fan of using jQuery for everything and anything but it's much easier to read visually, but I've also never had an issue with jQuery and svg's - it's just like any other dom content
My SVG code is attached please have a look and check how inline editing is possible with this stuff.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.