CODEWITHSUNDEEP
htmlcsssvg
max
max

Reputation: 49

SVG path doesnt fit to container viewbox

Here I have an icon that comes with a plugin Im using calender and a new Icon I want to add to the icons set, the twitter icon.

svg {
    display: inline-block;
    height: 16px;
    width: 16px;
    margin: 2px 0;
    fill: #111;
    text-decoration: none;
    pointer-events: none;
    line-height: 1;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" unselectable="on"><path d="M8.1 7v1h2.7v1H8.094v3H11.7v-1H9v-1h2.7V7zM4.5 7v1h.8v3h-.8v1h2.7v-1h-.9V7zM.9 1v14h14.4V1h-1.8v2h-2.7V1H5.4v2H2.7V1zm.9 4h12.6v9H1.8z"></path></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" unselectable="on"><path class="letterB" d="M16.16 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg>

both icons are in svg, but the first one calendar is made to work correctly with viewbox 16 16....the twitter icon I copied the svg path from an svg icons site....and it doesnt fit the container as in the example...

how do I fix this? I tried using a class to twitter path but without success

Upvotes: 2

Views: 409

Answers (2)

focus.style
focus.style

Reputation: 6760

Reconverted your twitter icon. It was some scale to viewBox issue.

svg {
    display: inline-block;
    height: 16px;
    width: 16px;
    margin: 2px 0;
    fill: #111;
    text-decoration: none;
    pointer-events: none;
    line-height: 1;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" unselectable="on"><path d="M8.1 7v1h2.7v1H8.094v3H11.7v-1H9v-1h2.7V7zM4.5 7v1h.8v3h-.8v1h2.7v-1h-.9V7zM.9 1v14h14.4V1h-1.8v2h-2.7V1H5.4v2H2.7V1zm.9 4h12.6v9H1.8z"></path></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" unselectable="on">
<path d="M16,3.8c-0.6,0.3-1.2,0.4-1.9,0.5c0.7-0.4,1.2-1,1.4-1.8c-0.6,0.4-1.3,0.6-2.1,0.8c-0.6-0.6-1.5-1-2.4-1c-2.1,0-3.7,2-3.2,4 C5.2,6.1,2.7,4.8,1.1,2.8c-0.9,1.5-0.4,3.4,1,4.4c-0.5,0-1-0.2-1.5-0.4c0,1.5,1.1,2.9,2.6,3.3c-0.5,0.1-1,0.2-1.5,0.1 c0.4,1.3,1.6,2.3,3.1,2.3C3.5,13.5,1.7,14,0,13.8c1.5,0.9,3.2,1.5,5,1.5c6.1,0,9.5-5.1,9.3-9.8C15,5,15.6,4.4,16,3.8z"/>
</svg>

UPDATED

Thanks to Danny '365CSI' Engelman

Individual paths can be edited in: aydos.com/svgedit

Update: There now is an even better one: https://yqnn.github.io/svg-path-editor/

Upvotes: 1

Danny &#39;365CSI&#39; Engelman
Danny &#39;365CSI&#39; Engelman

Reputation: 21271

If reworking paths is too much work, you can add a transform on the path

<path transform='scale(.5) translate(8 8)' ..../>

or wrap all SVG in a Group with a tranform:

<g transform='scale(.5) translate(8 8)'>

.. all paths, rects, whatever

</g>

Upvotes: 0

Related Questions