Display a SVG

HTML & CSS
1

Is there some sort of trick to making a SVG fill a div?

image
image609×214 6.55 KB

makes the SVG dissapear

2

Have you tried:

#container svg {
  width: 100%;
  height: 100%;
  display: block; 
}

Or can you show us the svg in situ?

3

From your screenshot it looks like you have deleted some of the HTML tag of the second image.

Why do you need to wrap the <h3> and SVG elements with <div> elements?

4

results in

image
image925×423 72 KB

I wrap then in divs so I can place the heading and thhe SVG side by side

image
image640×181 6.1 KB

5

Here is one way of placing the <h3> heading and SVG side-by-side:

I have given the container a light-blue background so you can see where it is. It is debatable whether <article> is the most appropriate tag.

If you adjust the width of your browser window, you will find the maximum width of the SVG is 800 pixels but if the width reduces betow 500 pixels, it will wrap the SVG below the <h3> heading and then continue to reduce the SVG in width as necessary after that. This means it will display quite well even on a small smartphone in portrait orientation. Of course you could change the value of max-width and the flex-basis within the SVG’s flex declaration.

1 Like
6

thanks…

I gotta learn flex