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
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. To get the dimensions of the SVG you can use the JavaScript method getBBox on the SVG element (something like: display the SVG in the browser, open the dev tools/inspector, select the SVG and choose "Use in Console", and use the reference of the element to call the method).
<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>