Highlighted

Sizing of SVG images

Explorer ,
Mar 14, 2020

Copy link to clipboard

Copied

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

Views

100

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

Sizing of SVG images

Explorer ,
Mar 14, 2020

Copy link to clipboard

Copied

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

Views

101

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
LEGEND ,
Mar 14, 2020

Copy link to clipboard

Copied

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?

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
Reply
Loading...
Explorer ,
Mar 14, 2020

Copy link to clipboard

Copied

Hi,

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

 

Mark

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
Reply
Loading...
Explorer ,
Mar 14, 2020

Copy link to clipboard

Copied

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.

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
Reply
Loading...
LEGEND ,
Mar 14, 2020

Copy link to clipboard

Copied

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;

}

}

 

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
Reply
Loading...
Explorer ,
Mar 14, 2020

Copy link to clipboard

Copied

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

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
Reply
Loading...
LEGEND ,
Mar 14, 2020

Copy link to clipboard

Copied

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 */

}

}

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
Reply
Loading...
Explorer ,
Mar 14, 2020

Copy link to clipboard

Copied

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

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
Reply
Loading...