Html Question posted in
Some basic documentation can be found here.

Html – How to vertically stretch an SVG without creating empty space at the bottom?

I’m trying to modify an SVG to increase its height while maintaining its design elements anchored to the bottom. The SVG is an arrow contained within a div. Here’s the current SVG code:

   <div class="arrow">
        <svg width="99" height="113" viewBox="0 0 99 113" fill="none" xmlns="http://www.w3.org/2000/svg">
            <line x1="0" y1="-2000" x2="0" y2="39.75" stroke="#CECCCC" stroke-width="2"/>
            <line x1="0" y1="69.75" x2="0" y2="84.5" stroke="#CECCCC" stroke-width="2"/>
            <path id="Shape" d="M98.3536 108.854C98.5488 108.658 98.5488 108.342 98.3536 108.146L95.1716 104.964C94.9763 104.769 94.6597 104.769 94.4645 104.964C94.2692 105.16 94.2692 105.476 94.4645 105.672L97.2929 108.5L94.4645 111.328C94.2692 111.524 94.2692 111.84 94.4645 112.036C94.6597 112.231 94.9763 112.231 95.1716 112.036L98.3536 108.854ZM24.5 109H98V108H24.5V109ZM0 84.5C0 98.031 10.969 109 24.5 109V108C11.5213 108 1 97.4787 1 84.5H0Z" fill="#CECCCC"/>
        </svg>
    </div>

When I simply increase the height attribute of the SVG, it creates an unwanted empty space at the bottom of the arrow, as shown in the picture.

<svg width="99" height="113" viewBox="0 0 99 413" fill="none" xmlns="http://www.w3.org/2000/svg">

enter image description here

I want to stretch the SVG such that the arrow elongates vertically but remains attached to the bottom of the SVG canvas, without introducing any empty space below it.

How can I adjust the SVG code to achieve this?

Tags:

2

Answers


  1. 0

    In order to stretch the contents of the SVG to match the SVG’s dimensions, add a preserveAspectRatio attribute with a value of none to the <svg> element. Note that this stretching will distort the graphic.

    figure {
  display: inline-flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 1rem;
  border: 1px solid black;
}

svg {
  background: rgba(200, 255, 255, 0.9);
  height: 300px;
}
    <figure>
  <figcaption>No <code>preserveAspectRatio</code> attribute.</figcaption>
  <svg width="99" height="113" viewBox="0 0 99 113" fill="none" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="-2000" x2="0" y2="39.75" stroke="#CECCCC" stroke-width="2"/>
  <line x1="0" y1="69.75" x2="0" y2="84.5" stroke="#CECCCC" stroke-width="2"/>
  <path id="Shape" d="M98.3536 108.854C98.5488 108.658 98.5488 108.342 98.3536 108.146L95.1716 104.964C94.9763 104.769 94.6597 104.769 94.4645 104.964C94.2692 105.16 94.2692 105.476 94.4645 105.672L97.2929 108.5L94.4645 111.328C94.2692 111.524 94.2692 111.84 94.4645 112.036C94.6597 112.231 94.9763 112.231 95.1716 112.036L98.3536 108.854ZM24.5 109H98V108H24.5V109ZM0 84.5C0 98.031 10.969 109 24.5 109V108C11.5213 108 1 97.4787 1 84.5H0Z" fill="#CECCCC"/>
</svg>
</figure>
<figure>
  <figcaption><code>preserveAspectRatio="none"</code></figcaption>
  <svg preserveAspectRatio="none" width="99" height="113" viewBox="0 0 99 113" fill="none" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="-2000" x2="0" y2="39.75" stroke="#CECCCC" stroke-width="2"/>
  <line x1="0" y1="69.75" x2="0" y2="84.5" stroke="#CECCCC" stroke-width="2"/>
  <path id="Shape" d="M98.3536 108.854C98.5488 108.658 98.5488 108.342 98.3536 108.146L95.1716 104.964C94.9763 104.769 94.6597 104.769 94.4645 104.964C94.2692 105.16 94.2692 105.476 94.4645 105.672L97.2929 108.5L94.4645 111.328C94.2692 111.524 94.2692 111.84 94.4645 112.036C94.6597 112.231 94.9763 112.231 95.1716 112.036L98.3536 108.854ZM24.5 109H98V108H24.5V109ZM0 84.5C0 98.031 10.969 109 24.5 109V108C11.5213 108 1 97.4787 1 84.5H0Z" fill="#CECCCC"/>
</svg>
</figure>
    Login or Signup to reply.
  2. 0

    I suggest that you split up the SVG in two. Now that you need a "break" on the vertical part with a "No" that would be a good place. It is almost an old school sliding doors technique there the vertical line is height and is cut off in the top.

    In the snippet you can see an example (the unordered list) and the two SVGs I used as CSS backgrounds underneath. I skipped the "Yes" arrow.

    In any case: Help yourself by drawing the arrow as a path with a stroke, not a path with a fill!

    ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

li {
  width: 50px;
  height: 50px;
  padding-left: 100px;
  margin-left: -25px;
  position: relative;
}

li>div {
  display: flex;
  width: 50px;
  height: 50px;
  background-color: silver;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
}

ul>ul {
  flex-direction: column;
}

ul.tree>ul:nth-of-type(1)>li:last-child {
  padding-top: 150px;
}

ul.tree>ul:nth-of-type(2)>li:last-child {
  padding-top: 70px;
}

li.down {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyBoZWlnaHQ9IjEwMDAiIHZpZXdCb3g9IjAgMCAyIDEwMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNDRUNDQ0MiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+CiAgPGxpbmUgeDE9IjEiIHgyPSIxIiB5Mj0iODkwIi8+Cjwvc3ZnPg==');
  background-repeat: no-repeat;
  background-position:left bottom;
}

li.down:before {
  content: 'No';
  position: absolute;
  left: -10px;
  bottom: 20px;
  width: 110px;
  height: 80px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyBoZWlnaHQ9IjUwIiB2aWV3Qm94PSIwIDAgMTAwIDUwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSIjQ0VDQ0NDIiBzdHJva2UtbGluZWNhcD0icm91bmQiPgogIDxwYXRoIGlkPSJTaGFwZSIgZD0ibSAxIDEgdiAyMCBhIDI0IDI0IDAgMCAwIDI0IDI0IGggNzQgbSAtNCAtNCBsIDQgNCBsIC00IDQiIGZpbGw9Im5vbmUiLz4KPC9zdmc+');
  background-repeat: no-repeat;
  background-position: 10px bottom;
}
    <ul class="tree">
  <li class="desition"><div>D</div></li>
  <ul>
    <li><div>D</div></li>
    <li class="down"><div>D</div></li>
  </ul>
  <ul>
    <li class="right"><div>D</div></li>
    <li class="down"><div>D</div></li>
  </ul>
</ul>


<p>Vertical line</p>
<svg height="1000" viewBox="0 0 2 1000" fill="none" xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke="#CECCCC" stroke-linecap="round">
  <line x1="1" x2="1" y2="890"/>
</svg>

<p>Arrow, down left</p>
<svg height="50" viewBox="0 0 100 50" fill="none" xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke="#CECCCC" stroke-linecap="round">
  <path id="Shape" d="m 1 1 v 20 a 24 24 0 0 0 24 24 h 74 m -4 -4 l 4 4 l -4 4" fill="none"/>
</svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search