Sizing of SVG images

[Fun Seeker]

Hi,

I'm trying to insert a few SVG images into my dreamweaver page and no matter what the width and height values are the images always fill the entire width of the parent container. I can't get them to render at the size I've saved them at in Illustrator. I've tried adding a class to them with the max-width attribute, and that didn't work. I wrapped the images in a div container and attached a class to that, with a max-width attribute, and that didn't work either.

If I have a svg image that measures 400px x 100px, how can I get it to render at that same size on the page? 

Thanks for any help you can provide.

Kind regards,

Mark

[osgood_]

How are you linking to the svg image?

Are you using <img src="myImage.svg"> or has illustrator created a load of svg code for you to include in the page and link to?

[Fun Seeker]

Hi,

Just as you've shown, <img src="myImage.svg">.

Mark

[Fun Seeker]

Hi,

OK, I've got this working but now the svg image won't resize when reviewed on a smaller screen. Is there any easy way to make them responsive?

Thanks.

[osgood_]

Yes, assuming you have added a class to the svg:

<img src="myImage.svg" class="myImage">

use css media queries:

@media screen and (max-width: 786px) {

.myImage {

width: 200px;

}

}

@media screen and (max-width: 480px) {

.myImage {

width: 100px;

}

}

[Fun Seeker]

OK, thanks. The only problem is that when viewed on a smaller screen the images are way too small. Do I need to adjust the "width" or "max-width" code, or both in order to correct for this? 

Thanks for all your help.

Mark

[osgood_]

Just adjust the px width in the media query until you find a width that is suitable to your requirements.

@media screen and (max-width: 480px) {

.myImage {

width: 100px; /* adjust the width */

}

}

[Fun Seeker]

Hi,

I wrapped the svg in a div tag, and using CSS got just what I wanted. I'll look more into the use of media queries though, as I know it's a viable option. Thanks so much for your help.

Mark