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

Html – SVG not respecting parent container width and height

I’m trying to use some SVG I made in Figma on a website. For the life of me I cant make the SVG respect the parent container. I’m using Tailwind for CSS. Here is the code:

<script src="https://cdn.tailwindcss.com"></script>
<div class="space-y-4">
  <div class=" w-16 h-16">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-full h-full object-contain">
        <path fill="#000" d="M14 68h8a2 2 0 1 0 0-4h-8a2 2 0 1 0 0 4"></path>
        <path fill="#000" d="m71.86 47.26-4-10A2 2 0 0 0 66 36H54v-7.26l4.98 2.98c.86.5 1.96.32 2.58-.48l8-10c.6-.74.58-1.78-.02-2.52l-10-12c-.18-.22-.4-.38-.64-.5l-12-6c-.78-.4-1.7-.24-2.32.36A12.1 12.1 0 0 1 36 4.14c-3.1 0-6.2-1.18-8.58-3.56C27.04.2 26.52 0 26 0c-.3 0-.6.08-.9.22l-12 6c-.24.12-.46.28-.64.5l-10 12c-.6.74-.62 1.78-.02 2.52l8 10c.62.8 1.72.98 2.58.48L18 28.74V36H6a2 2 0 0 0-1.86 1.26l-4 10C-.38 48.58.58 50 2 50h2v24c0 1.1.9 2 2 2h60c1.1 0 2-.9 2-2V50h2c1.42 0 2.38-1.42 1.86-2.74M44 6.02c-.02 4.4-3.6 7.98-8 7.98s-7.98-3.58-8-7.98a16.19 16.19 0 0 0 16 0M12.48 27.38l-5.9-7.36L15.26 9.6 24 5.24V6c0 6.62 5.38 12 12 12s12-5.38 12-12v-.76l8.74 4.36 8.68 10.42-5.9 7.36L54 24.06V22c0-1.1-.9-2-2-2s-2 .9-2 2v14H22V22c0-1.1-.9-2-2-2s-2 .9-2 2v2.06zM64 72H8V50h56zM4.96 46l2.4-6h57.28l2.4 6z"></path>
    </svg>
  </div>

What am I doing wrong here?

TIA

Tags:

2

Answers


  1. 0

    Try setting the max width and height, for example

    <div class="w-16 h-16 max-w-full max-h-full">

    Also remove the viewBox="0 0 24 24" from the SVG

    Your final version should look like this

    <script src="https://cdn.tailwindcss.com"></script>
<div class="space-y-4">
  <div class="w-16 h-16 max-w-full max-h-full">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" class="w-full h-full object-contain">
        <path fill="#000" d="M14 68h8a2 2 0 1 0 0-4h-8a2 2 0 1 0 0 4"></path>
        <path fill="#000" d="m71.86 47.26-4-10A2 2 0 0 0 66 36H54v-7.26l4.98 2.98c.86.5 1.96.32 2.58-.48l8-10c.6-.74.58-1.78-.02-2.52l-10-12c-.18-.22-.4-.38-.64-.5l-12-6c-.78-.4-1.7-.24-2.32.36A12.1 12.1 0 0 1 36 4.14c-3.1 0-6.2-1.18-8.58-3.56C27.04.2 26.52 0 26 0c-.3 0-.6.08-.9.22l-12 6c-.24.12-.46.28-.64.5l-10 12c-.6.74-.62 1.78-.02 2.52l8 10c.62.8 1.72.98 2.58.48L18 28.74V36H6a2 2 0 0 0-1.86 1.26l-4 10C-.38 48.58.58 50 2 50h2v24c0 1.1.9 2 2 2h60c1.1 0 2-.9 2-2V50h2c1.42 0 2.38-1.42 1.86-2.74M44 6.02c-.02 4.4-3.6 7.98-8 7.98s-7.98-3.58-8-7.98a16.19 16.19 0 0 0 16 0M12.48 27.38l-5.9-7.36L15.26 9.6 24 5.24V6c0 6.62 5.38 12 12 12s12-5.38 12-12v-.76l8.74 4.36 8.68 10.42-5.9 7.36L54 24.06V22c0-1.1-.9-2-2-2s-2 .9-2 2v14H22V22c0-1.1-.9-2-2-2s-2 .9-2 2v2.06zM64 72H8V50h56zM4.96 46l2.4-6h57.28l2.4 6z"></path>
    </svg>
  </div>
    Login or Signup to reply.
  2. 0

    The issue is that the value of the viewBox attribute is on aligned with the size of the content of the SVG.

    The viewBox is representing the coordinate system for the SVG. In your case the content is more of less 73 in width and 76 in height.

    <script src="https://cdn.tailwindcss.com/3.4.5"></script>
<div class="space-y-4">
  <div class=" w-16 h-16">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 73 76" class="w-full h-full object-contain">
        <path fill="#000" d="M14 68h8a2 2 0 1 0 0-4h-8a2 2 0 1 0 0 4"></path>
        <path fill="#000" d="m71.86 47.26-4-10A2 2 0 0 0 66 36H54v-7.26l4.98 2.98c.86.5 1.96.32 2.58-.48l8-10c.6-.74.58-1.78-.02-2.52l-10-12c-.18-.22-.4-.38-.64-.5l-12-6c-.78-.4-1.7-.24-2.32.36A12.1 12.1 0 0 1 36 4.14c-3.1 0-6.2-1.18-8.58-3.56C27.04.2 26.52 0 26 0c-.3 0-.6.08-.9.22l-12 6c-.24.12-.46.28-.64.5l-10 12c-.6.74-.62 1.78-.02 2.52l8 10c.62.8 1.72.98 2.58.48L18 28.74V36H6a2 2 0 0 0-1.86 1.26l-4 10C-.38 48.58.58 50 2 50h2v24c0 1.1.9 2 2 2h60c1.1 0 2-.9 2-2V50h2c1.42 0 2.38-1.42 1.86-2.74M44 6.02c-.02 4.4-3.6 7.98-8 7.98s-7.98-3.58-8-7.98a16.19 16.19 0 0 0 16 0M12.48 27.38l-5.9-7.36L15.26 9.6 24 5.24V6c0 6.62 5.38 12 12 12s12-5.38 12-12v-.76l8.74 4.36 8.68 10.42-5.9 7.36L54 24.06V22c0-1.1-.9-2-2-2s-2 .9-2 2v14H22V22c0-1.1-.9-2-2-2s-2 .9-2 2v2.06zM64 72H8V50h56zM4.96 46l2.4-6h57.28l2.4 6z"></path>
    </svg>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search