How can i svg full width

This is my work link and here is my code url

i need full widht images with this svg, im tried to do that,
im also read this link but i can not working properly

i need like this images

thanks ,
Likhon.

Hi @kmlikhonlik and welcome to the forum.

I usually do not set the width and height of the SVG, instead set the viewbox dimensions to the maximum width and height of the containg SVG elemets. This makes the SVG container responsive within its parent container.

The following works OK for the fixed image dimensions of 480x288, unfortunately there is a problem with the wavy green line.

<div style="width:88%;  outline:dotted 1px red; background-color:#eee;">
	<svg viewBox="0 0 650 360">
		<image 
			xlink:href="https://sea2.discourse-cdn.com/sitepoint/community/uploads/default/optimized/3X/7/b/7b30ad3dd5f57d5988f880dd9a380dd311f39fa8_1_690x227.PNG" 
			x="0" y="0" 
			width="640" height="227"			
		/>

		<g>
  		<title>Layer 1</title>
  		<path 
  			stroke="#00ff00" 
  			id="svg_2" 
  			d="	m 1, 332
  					c 202,26  202,26  202,26
  					c 0,0 116,-16 116,-16
  					c 0,0 117,16   117,16
  					c 0,0 201,-26   201,-26
  					c 0,0 1,-327    1,-327
  					c 0,0 -637,0 -637,0
  					c 0,0 0,328 0,328
  					z
  				" 
  					stroke-width="8" 
  					fill="url(#img1)"
  		/>
 		</g>
	</svg>	
</div>

I read somewhere it is best to have integer values for the pixel dimensions so the floating point values can all be truncated and rounded up or down.

Edit:
Maybe the green line can be scaled using a class. Check on the parameters, you may be lucky and not have to scale all the fixed points.

Edit:
Swapped images and changed floating point values to integers.

Thanks,

one thing you do not check please.
check it on safari and ie.
it do not work properly . and images is not show

its work fine

and i need this shape with full width i marked this

I do not have access to Safari or IE because I am using Linux.

Perhaps someone else could test the script?

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