horizontal center svg path in svg include into div container - html

Can you help me to understand why my path refuse to horizontally center into svg container or into div.
Ok if I try to align horizontally JUST the path without rect svg I can do that if svg container is 100% width. But if I want to add rect and just work into div width and height static, I never find solution for path center.
html :
<div id="svg-container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1200 1200">
<rect id="background" width="100%" height="100%" fill="grey"/>
<path id="path" xmlns="http://www.w3.org/2000/svg"
d="M 201.68015,653.12212 C 189.21313,655.67886 177.65942,662.51955 166.63177,673.41648 C 155.59034,684.51344 91 L 310.26302 176.06855,451.96604 z etc................ "
style="fill:#131516;fill-rule:evenodd;stroke:#131516;stroke-width:0.60229105" />
</svg>
</div>
And css :
#svg-container
{
height: 250px;
width: 250px;
}
#path
{
display: block;
position: relative;
left: 30%;
}
JSFiddle : https://jsfiddle.net/170jkfLr/2/#&togetherjs=w9w2vhjhEJ


Do this, example (twitter icon into the mid):
<center>
<div style="width: 40px; height: 40px;">
<svg class="sqs-svg-icon--social" viewBox="0 0 64 64">
<use class="sqs-use--icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-icon">
<svg id="twitter-icon" viewBox="0 0 64 64" width="100%" height="100%">
<path
d="M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 C41.7,19.8,40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1 c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8C46,24.5,47.1,23.4,48,22.1z"
/>
</svg>
</use>
</svg>
</div>
</center>

Related

Responsive width SVG image with fixed height rectangle at bottom - see my pen

I need a SVG image something like the image bellow (open door architectural symbol ) that will be resized proportional but the height in green and width in red will stay same.The colors and sizes are just for illustrative purpose.
I made try with this code bellow but don't know how to make the height in green and width in red to be fixed when image is resized.
If you can help thank you very much on your time!
<svg id="imgsvg" width="400px" height="400px" version="1.0" state='normal'
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<!-- The left head -->
<svg class="head input-source" id="left"
height="100%"
width="100%"
viewBox="0 0 10 200"
preserveAspectRatio="xMinYMax"
>
<rect
width="100%"
height="100%"
stroke='black'
stroke-width='0'
fill="#000"
/>
</svg>
<!-- The bottom head -->
<svg class="head input-source" id="bottom"
height="100%"
width='100%'
viewBox="0 0 200 20"
preserveAspectRatio="xMinYMax"
>
<rect
width="100%"
height="100%"
stroke='gray'
stroke-width='0'
fill="gray"
/>
</svg>
</defs>
<!-- The Quad -->
<svg class='head input-source' id="quad"
height="100%"
width='100%'
viewBox="0 0 200 200"
preserveAspectRatio="xMinYmax"
>
<path
d="M0,1 Q199,0 199,199"
fill="#ffffff"
fill-opacity="0"
stroke="#000000"
stroke-width="2"
/>
</svg>
<use xlink:href='#left'/>
<use xlink:href='#bottom'/>
</svg>

If the SVGs are inline you can use the same lengths and unites in your CSS as the rest of the HTML page. Here you have three identical SVGs. The only difference is that they are contained in <div>'s with different sizes. You can see that the orange rectangle maintains the same "width" in all three.
.small {
width: 100px;
height: 50px;
margin: 1px;
}
.medium {
width: 200px;
height: 100px;
margin: 1px;
}
.large {
width: 400px;
height: 200px;
margin: 1px;
}
svg {
width: 100%;
height: 100%;
}
rect.r1 {
width: 80%;
height: 20px;
y: calc(100% - 20px);
}
rect.r2 {
width: 20px;
height: 100%;
}
<div class="large">
<svg xmlns="http://www.w3.org/2000/svg">
<rect fill="black" width="100%" height="100%"/>
<rect class="r1" fill="orange"/>
<rect class="r2" fill="orange"/>
</svg>
</div>
<div class="medium">
<svg xmlns="http://www.w3.org/2000/svg">
<rect fill="black" width="100%" height="100%"/>
<rect class="r1" fill="orange"/>
<rect class="r2" fill="orange"/>
</svg>
</div>
<div class="small">
<svg xmlns="http://www.w3.org/2000/svg">
<rect fill="black" width="100%" height="100%"/>
<rect class="r1" fill="orange"/>
<rect class="r2" fill="orange"/>
</svg>
</div>

I resolved my problem
My solution is below
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="mdKLYZp" data-user="Zoki-Poki" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/Zoki-Poki/pen/mdKLYZp">
Untitled</a> by Zoki Poki (#Zoki-Poki)
on CodePen.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

SVG changes the size of its container (expands it). How to prevent it?

I put SVG picture in some block and the block has expanded
I've tried to change svg attributes but then I get different looks of the image - outline path gets thicker
Html code
<section class="image item item2 cat_image">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 640 800" width="640pt" height="800pt"><defs>
<path...></g>
</svg>
</section>
CSScode
svg {
transform: scale(0.45);
transform-origin: bottom;
}
I want the width of the block be the same as svg picture.
UPDATE:
Also if I set width to the block to make it compact then the image shrinks as well

Paulie_D's suggestion of using display: inline-block should be the correct solution.
That's what I've used in the following example, and it works okay.
section {
display: inline-block;
background: linen;
}
.smaller {
width: 300px;
height: 400px;
overflow: hidden;
}
<section>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 640 800" width="640pt" height="800pt">
<ellipse cx="320" cy="400" rx="320" ry="400" fill="rebeccapurple"/>
</svg>
</section>
<p/>
<section class="smaller">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 640 800" width="640pt" height="800pt">
<ellipse cx="320" cy="400" rx="320" ry="400" fill="rebeccapurple"/>
</svg>
</section>

<style>
div.outer{
background:red;
width:200px;
}
</style>
<div class="outer">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" height="100pt">
<path d="M50,40 l100,0 0,50 -100,0 0,-50"
style="stroke: #000000; fill:green;" />
</svg>
</div>

Animate height of SVG without changing proportions of background image

I'm trying to create an accordion using SVG shapes, I am using SVGs because my sections do not have regular shapes.
I created this shape using SVG clipPath
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1276.4 270" style="enable-background:new 0 0 1276.4 270;">
<style type="text/css">
.st0{display:none;clip-path:url(#XMLID_111_);}
.st1{display:inline;}
</style>
<g id="XMLID_5_">
<defs>
<path id="XMLID_1_" d="M414.5,2.2c-27.6,1.7-55.2,2.9-82.7,0.9c-10.7,0.4-21.4,0.9-32.1,1.5c-33.9,1.8-67.8,5-101.7,5.8
C163.7,11.2,129.3,10.1,95,9c-31.7-1-63.3-2.1-95-1.6v126.3l0.2,121.8c160.1-23.4,321.4-2.1,482.2,4.8c86.7,3.7,173.1,0,259.5-7.6
c42.7-3.7,85.1-9.3,128-7.3c44.5,2.1,88.7,8.5,132.8,14.5c25,3.3,50,6.4,75.2,8.3c27.5,2,55,2,82.6,1.5c39-0.7,78-2.6,116.9-6.1
V137.8l-0.2-126.1c-7.6,0.2-15.3,0.1-23-0.3c-20.8-1-41.6-3-62.5-3.6c-43.4-1.3-86.8-0.8-130.2-2c-43.7-1.1-87.3-3.1-131-2.3
c-43.1,0.8-86.1,3.2-129.2,4.7c-43.6,1.5-87.1,1.8-130.7-0.1c-43.7-1.9-87.2-5-130.9-6.9C521.9,0.4,504.1,0,486.4,0
C462.5,0,438.5,0.7,414.5,2.2"/>
</defs>
<use xlink:href="#XMLID_1_" style="overflow:visible;fill:#525252;"/>
<clipPath id="shape_1">
<use xlink:href="#XMLID_1_" style="overflow:visible;"/>
</clipPath>
</g>
<image clip-path="url(#shape_1)" width="2000" height="1700" xlink:href="dummy_url.jpg" preserveAspectRatio="xMidYMin slice"></image>
</svg>
When you click on a section it should expand in height. My problem is that I can't change the height of the SVG without ruining the background image's proportions. If there is an alternative to using SVGs in this situation I would be open to it, thank you very much.

Have you thought of using the image(s) as fill for your svg elements instead of image?
Some junk code for this type of pattern would look something like this:
<rect x="-50" width="100%" height="100%" style="max-width=950px" fill="url(#your-id)" rx="6" ry="6" id="background-panel"/>
<defs>
<pattern id="your-id" patternUnits="userSpaceOnUse" x="120" y="170" width="650" height="547">
<image xlink:href="dummy_url.jpg" width="650" height="547" opacity="1"/>
</pattern>
</defs>
that way you can change the size of the path (in this case, the rect) and it won't change the size/proportions of the image, it will just reveal more of it.

I managed to do it by creating one svg:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 2315.2 989" style="enable-background:new 0 0 2315.2 989;" xml:space="preserve">
<style type="text/css">
.st0{clip-path:url(#XMLID_45_);fill-rule:evenodd;clip-rule:evenodd;fill:#913B58;}
</style>
<g id="XMLID_30_">
<g id="XMLID_31_">
<defs>
<rect id="XMLID_2_" x="1.5" width="2313.9" height="987.8"/>
</defs>
<clipPath id="shape_1">
<use xlink:href="#XMLID_1_" style="overflow:visible;"/>
</clipPath>
<path id="XMLID_1_" class="st0" d="M875.1,970.2c157.1,6.7,313.5-0.1,470-13.8c77.3-6.8,154.1-16.8,231.8-13.2
c80.6,3.7,160.6,15.5,240.5,26.3c45.2,6,90.6,11.7,136.1,15c49.8,3.7,99.7,3.7,149.6,2.8c70.8-1.3,141.6-4.7,212.1-11.1l-0.4-955
c-13.8,0.3-27.7,0.1-41.7-0.5c-37.7-1.8-75.4-5.5-113.1-6.6c-78.6-2.3-157.3-1.5-235.9-3.6c-79.1-2.1-158.2-5.6-237.3-4.2
c-78,1.4-155.9,5.7-233.9,8.5c-78.9,2.8-157.7,3.2-236.6-0.2c-79.1-3.4-158-9.1-237-12.5c-75.9-3.3-151-2.8-226.8,1.9
c-50,3.1-100.1,5.2-149.8,1.6c-19.4,0.8-38.7,1.7-58.1,2.7c-61.4,3.3-122.8,9-184.2,10.5c-119.7,2.9-239.3-7.3-359-5.4l0.4,948.1
C291.8,919.2,583.9,957.8,875.1,970.2"/>
</g>
</g>
</svg>
I created a div for each year containing an image container
<div class="year">
<div class="image-container" style="background-image: url(<?php the_sub_field('image') ?>);"></div>
</div>
Then I specified the svg to the clip-path property of the image container in CSS
.image-container{
clip-path: url(#shape_1);
background-size: cover;
background-repeat: no-repeat;
padding-top: 40%;
background-position-y: 27%;
position: relative;
}
I partially overlapped the years so instead of trying to expand the year containers I just slide down all the years after the one clicked by using margin-top:
$('.year').each(function(){
var pYearIndex = $(this).index();
if(pYearIndex>1){
$(this).addClass('not-first');
}
var begin = 0;
var translated = (pYearIndex*(-3))+begin;
});
$('.year').on('click',function() {
var nYears = $('.year').length;
var thisYear = $(this).index();
if($(this).hasClass('to_show')){
$(this).removeClass('to_show');
$('.expanded').removeClass('expanded');
$('footer').css('margin-top', '-22%');
}
else{
$('.expanded').removeClass('expanded');
$('.to_show').removeClass('to_show');
$(this).addClass('to_show');
if(thisYear<nYears){
$('.year').eq(thisYear).addClass('expanded');
$('footer').css('margin-top', '-22%');
}
else{
$('footer').css('margin-top','-2%');
}
}
});

SVG full Width, while keeping img proportions

I've got an svg image which I want to autoresize to 100% width.
The problem is, that I've placed an Image (100px x 100px) on the left side of that svg and that picture has to keep its proportions.
I tried it with viewBox, but with this method the whole svg, and not only the path, gets resized.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 100" preserveAspectRatio="none" style="-webkit-user-select: auto;">
<g>
<title>title</title>
<image x="0" y="1.00001" width="100" height="100" id="svg_1" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3goUDAEUe/ATzgAAAkNJREFUeNrtnetugkAQRr8hJH3/tzWt7PRHxQuyN4qw6DlJo7GK7Jy9zdBQkxS0DJPkl0e44ZPYVMVo/AA0QkcIEAIIQQggBCGAEIQAQhAypvtk7A0wVzqhPtWYENiRnhBU4QWdu/SREVIQ7Np4eIGU1Pe4bpc/XJL39O6H33kigKnjWOYYc8d0SYOks6Sfy0/oF/aCIwW89HWfPO9merMSvT62IYq9dv/8W9JJ0qkvbKQ1OLXkgloiJLXLnLbdIlNTbrqyzDIRJH2N0o+2hnjlSPbKxVcrvL+2PePUNUgajiLEC4OlfwZsrxzsOuW1LGTt3khiCPVQXEQIIAQhgJA3oala1t2Wb0mhb6tTbG7b65mEzUoacF9XeHpT12kIYdgwwLaXgP8IydV8Hhpgk8bEsrtoRMw0uJ8nyWG4TLNBZdcdUh3FWhCwVEhp0c5iMnKtjUXHzRTcBy274FMS9FaqAP7XDZfP075WDyupj/h660nT5RhKJ2x7ASEIAYQgBBDyASytZXks+atJ/GqTHIRUxCn2dzmGhKdsXIniRd/KWb5RwEsmClt7yio+C4+MljcdDVYzGmIHoHTCLgsQghBACEIAIQgBhCAEEAIIQQggBCGAEIQAQhACCAGEIAQQghBACEIAIQgBhABCEAIIQQggBCGAEIQAQgAhCAGEHBT+bd4LuNyNwTPvud7ZwZ8/CxvxcCvYuVuNvFRI6sYf0MAagowd1hBbWYR9mOBNpixGRiNCgDwEIYAQhABCEAIIAYS0zy9dWbdrK07bIAAAAABJRU5ErkJggg=="/>
<path style="-webkit-user-select: auto;" stroke="#000000" fill="#FF0000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m98.66982,67.61566c0,0 136.5026,-1.32306 303.78312,-30.42615c167.28064,-29.10306 238.87799,-14.55161 238.20886,-14.55161c-0.66913,0 1.33826,79.37253 1.33826,79.37253c0,0 -543.33026,1.32291 -543.99939,1.32291c-0.66912,0 0.66915,-35.71768 0.66915,-35.71768z" id="svg_10"/>
</g>
</svg>
For using the svg I've got
<div class="svg">
<p>tesygst</p>
</div>
and
.svg {
background: url(pathToSvg.svg) no-repeat bottom left;
position : fixed;
bottom : 0;
left : 0;
height : 100px;
width : 100%;
}
The img has to be placed at the left bottom corner, while the path has to extend itself to 100% width starting at the end of that pic.
Hope somebody can help me :/

You can't put an image inside an SVG, stretch the SVG and have the image not stretch also. That's just how things work. You have to think of the contents of the SVG just the same as if you were talking about an <img> rather than an SVG. You stretch the img, the whole thing stretches.
I take it you are trying to keep the image at 100x100px?
You will need to move the image out of the SVG and into the HTML. Then position it in the right place with CSS. For example:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 100" preserveAspectRatio="none" style="-webkit-user-select: auto;">
<g>
<title>title</title>
<path style="-webkit-user-select: auto;" stroke="#000000" fill="#FF0000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m98.66982,67.61566c0,0 136.5026,-1.32306 303.78312,-30.42615c167.28064,-29.10306 238.87799,-14.55161 238.20886,-14.55161c-0.66913,0 1.33826,79.37253 1.33826,79.37253c0,0 -543.33026,1.32291 -543.99939,1.32291c-0.66912,0 0.66915,-35.71768 0.66915,-35.71768z" id="svg_10"/>
</g>
</svg>
<img width="100" height="100" src="data:image/png;base64,..."/>
CSS:
IMG {
position: relative;
top: -100px;
}
Demo here

how can i make an svg responsive

Hello i'm new to using svg while watching a tutorial the autor created an svg file with the following attributes to make it resposive and it works for him, the problem is when i'm trying to do the same the shape gets bigger and it's not resposive at all. please help thank you
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 400 400">
<style type="text/css">
.st0{fill:#231F20;}
.circle{
fill:#27AAE1;
}
</style>
<g id="container" class="colors">
<circle class="st0" cx="200" cy="200" r="197.5"/>
</g>
<g id="dots" class="colors">
<path class="circle" id="c1" d="M146.98,363.54L146.98,363.54L146.98,363.54c-9.2-2.98-14.23- 12.851-11.25-22.05l0,0
c2.97-9.19,12.84-14.23,22.04-11.25l0,0c9.19,2.979,14.23,12.85,11.25,22.04l0,0c-2.4,7.409-9.26,12.109-16.64,12.109l0,0
C150.59,364.39,148.77,364.12,146.98,363.54z"/>
<path class="circle" id="c2" d="M231.13,352.25c-2.99-9.19,2.04-19.061,11.229-22.05l0,0c9.19-2.99,19.07,2.04,22.061,11.229l0,0
c2.979,9.19-2.04,19.061-11.23,22.05l0,0c-1.8,0.59-3.63,0.86-5.42,0.86l0,0C240.39,364.34,233.53,359.64,231.13,352.25z"/>
<path class="circle" id="c3" d="M61.03,301.16L61.03,301.16L61.03,301.16c-5.69-7.811-3.98-18.761,3.83-24.45l0,0
c7.81-5.7,18.76-3.98,24.45,3.83l0,0c5.7,7.81,3.98,18.75-3.83,24.45l0,0c-3.11,2.27-6.72,3.359-10.29,3.359l0,0
C69.79,308.35,64.46,305.85,61.03,301.16z"/>
<path class="circle" id="c4" d="M314.63,304.87c-7.82-5.69-9.55-16.63-3.86-24.45l0,0c5.681-7.82,16.63-9.54,24.45-3.86l0,0
c7.811,5.69,9.54,16.63,3.85,24.45l0,0l0,0l0,0c-3.42,4.71-8.76,7.21-14.159,7.21l0,0C321.34,308.22,317.729,307.13,314.63,304.87z
"/>
<path class="circle" id="c5" d="M28.13,200.18c-0.01-9.66,7.81-17.5,17.48-17.51l0,0c9.66-0.01,17.51,7.81,17.52,17.48l0,0
c0,9.66-7.82,17.5-17.49,17.52l0,0c0,0-0.01,0-0.02,0l0,0C35.97,217.67,28.13,209.84,28.13,200.18z"/>
<path class="circle" id="c6" d="M336.88,200c0-0.02,0-0.03,0-0.05l0,0c-0.01-0.08-0.01-0.16-0.01-0.24l0,0c-0.021-9.67,7.8-17.52,17.47-17.54
l0,0c9.66-0.02,17.51,7.8,17.53,17.46l0,0c0,0.07,0,0.14,0,0.21l0,0c0,0.05,0,0.11,0,0.16l0,0c0,0,0,0,0.01,0l0,0
c0,9.66-7.84,17.5-17.5,17.5l0,0C344.71,217.5,336.88,209.66,336.88,200z"/>
<path class="circle" id="c7" d="M64.7,123.58c-7.82-5.68-9.56-16.62-3.88-24.44l0,0c5.68-7.83,16.62-9.56,24.44-3.89l0,0
c7.82,5.68,9.56,16.63,3.88,24.45l0,0c-3.42,4.71-8.76,7.22-14.17,7.22l0,0C71.4,126.92,67.81,125.83,64.7,123.58z"/>
<path class="circle" id="c8" d="M310.6,119.34L310.6,119.34c-5.7-7.8-4-18.75,3.8-24.45l0,0c7.811-5.7,18.761-4,24.46,3.8l0,0
c5.7,7.81,4,18.76-3.81,24.46l0,0c-3.11,2.27-6.72,3.37-10.31,3.37l0,0C319.35,126.52,314.03,124.03,310.6,119.34z"/>
<path class="circle" id="c9" d="M135.43,58.64c-3-9.19,2.02-19.07,11.21-22.07l0,0c9.19-3,19.07,2.02,22.06,11.21l0,0
c3,9.19-2.01,19.07-11.2,22.07l0,0c-1.8,0.59-3.63,0.87-5.43,0.87l0,0C144.7,70.72,137.84,66.02,135.43,58.64z"/>
<path class="circle" id="c10" d="M242.09,69.71c-9.2-2.97-14.25-12.83-11.28-22.03l0,0c2.971-9.19,12.84-14.24,22.03-11.27l0,0
c9.2,2.97,14.25,12.83,11.28,22.03l0,0c-2.391,7.41-9.261,12.13-16.65,12.12l0,0C245.689,70.56,243.88,70.29,242.09,69.71z"/>
</g>
</svg>

With SVG, it gets a little weird:
First thing you should do is wrap the SVG tag in a parent DIV tag.
<div id="parent_element">
<svg id="your_svg" viewBox="0 0 400 400"></svg>
</div>
Add the attribute preserveAspectRatio="xMinyMin meet" to the SVG
<div id="parent_element">
<svg id="your_svg" preserveAspectRatio="xMinyMin meet" viewBox="0 0 400 400"></svg>
</div>
Looking at the CSS, you need to set the child element absolutely positioned relative to the parent element:
/*Parent container*/
div {
display: inline-block;
overflow: hidden;
padding-bottom: 100%;
position: relative;
vertical-align: middle;
}
/*SVG child*/
svg {
display: inline-block;
left: 0;
position: absolute;
top: 0;
}
Adjust as needed. Notice the padding-bottom hack. It is based on the height/width of the SVG ViewBox. For more information on that check out this Codrops Article and you can find another (and shorter) tutorial in this article