SVG Not scaling

HTML & CSS
1

Link


<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg width="50" height="25" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 58 58" style="enable-background:new 0 0 58 58;" xml:space="preserve" width="20px" height="20px">
<path style="fill:#EFCE4A;" d="M46.324,52.5H1.565c-1.03,0-1.779-0.978-1.51-1.973l10.166-27.871
c0.184-0.682,0.803-1.156,1.51-1.156H56.49c1.03,0,1.51,0.984,1.51,1.973L47.834,51.344C47.65,52.026,47.031,52.5,46.324,52.5z"/>
<g>
<path style="fill:#EBBA16;" d="M50.268,12.5H25l-5-7H1.732C0.776,5.5,0,6.275,0,7.232V49.96c0.069,0.002,0.138,0.006,0.205,0.01
l10.015-27.314c0.184-0.683,0.803-1.156,1.51-1.156H52v-7.268C52,13.275,51.224,12.5,50.268,12.5z"/>
</svg>

This is not scaling. It shows width and height 0. I also tried CSS such as

img svg {width: 20px; height:20px;}

svg {width:20px; height: 20px;}

Please advise how can I fix this.

<p class="para">
  <img src="img/folder.svg" alt="">Tamil Mp3 Songs
</p>
2

The css selectors you use will not work with the svg in an img because you reference an svg element when there is not one in the document.
Select the img element, or better still give it a class and select that.

1 Like
3

I already tried it with class. It didnt worked.

image
image1086Ă—643 24.6 KB

4

Hi there codeispoetry,

your folder.svg file did not validate. :wonky:

try the one that can be found in this attachment instead…

poetic-svg.zip (1.2 KB)

coothead

1 Like
5

Hi there @coothead

Did you make any changes to folder.svg file also?

certainly you did, what was the actual change that you did?

6

I just amended this…

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg width="50" height="25" version="1.1" id="Capa_1" 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 58 58" 
style="enable-background:new 0 0 58 58;" 
xml:space="preserve" width="20px" height="20px">
 <path style="fill:#EFCE4A;" 
  d="M46.324,52.5H1.565c-1.03,0-1.779-0.978-1.51-1.973l10.166-27.871
  c0.184-0.682,0.803-1.156,1.51-1.156H56.49c1.03,0,1.51,0.984,1.51,1.973L47.834,51.344C47.65,52.026,47.031,52.5,46.324,52.5z"/>
 <g>
 <path style="fill:#EBBA16;" 
  d="M50.268,12.5H25l-5-7H1.732C0.776,5.5,0,6.275,0,7.232V49.96c0.069,0.002,0.138,0.006,0.205,0.01
  l10.015-27.314c0.184-0.683,0.803-1.156,1.51-1.156H52v-7.268C52,13.275,51.224,12.5,50.268,12.5z"/>
</svg>

…to this…

<svg width="50" height="25" version="1.1" id="Capa_1" 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" 
x="0px" y="0px"
viewBox="0 0 58 58" 
style="enable-background:new 0 0 58 58;" 
xml:space="preserve">
 <path style="fill:#EFCE4A;" 
  d="M46.324,52.5H1.565c-1.03,0-1.779-0.978-1.51-1.973l10.166-27.871
  c0.184-0.682,0.803-1.156,1.51-1.156H56.49c1.03,0,1.51,0.984,1.51,1.973L47.834,51.344C47.65,52.026,47.031,52.5,46.324,52.5z"/>
 <g>
 <path style="fill:#EBBA16;" 
  d="M50.268,12.5H25l-5-7H1.732C0.776,5.5,0,6.275,0,7.232V49.96c0.069,0.002,0.138,0.006,0.205,0.01
  l10.015-27.314c0.184-0.683,0.803-1.156,1.51-1.156H52v-7.268C52,13.275,51.224,12.5,50.268,12.5z"/>
 </g>
</svg>

coothead

1 Like
7

Means you deleted this part. Right?

8

Hi there codeispoetry,

I removed this…

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

…and this…

 width="20px" height="20px"

…and added this …

</g>

…and voilà the img worked. :rofl:

coothead

1 Like
9

:rofl:

10

Just showing off my truly amazing linguistic skills. :winky:

coothead

1 Like
11

tu es un génie

12

I can only do one word at a time. :wonky:

coothead

1 Like
13

smart people use google translator. :rofl:

genius
genius826Ă—444 91.8 KB

1 Like
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.