I want to invert the colours of the background image given below.
html {
background-image: url('data:image/svg+xml,%3Csvg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="%239C92AC" fill-opacity="0.4" fill-rule="evenodd"/%3E%3C/svg%3E');
}
Apply the coloration to the background and use white color for SVG. You don't really need transparency since you are dealing with the html element so there is nothing behind.
html {
background: url('data:image/svg+xml,%3Csvg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="white" fill-rule="evenodd"/%3E%3C/svg%3E'),
rgba(156, 146, 172, 0.4);
}
Related
I want to reduce the size of a svg. I tried reducing the height and width attributes and that helped, but the size of the image is still too big and when I try to reduce more, it ends up being cut instead of reduced.
So, more specifically, if I have a svg like this one:
<svg height="15" width="28" fill="#D0D4D9" fill-rule="evenodd">
<path d="M12 18c-4.536 0-7.999-4.26-7.999-6 0-2.001 3.459-6 8-6 4.376 0 7.998 3.973 7.998 6 0 1.74-3.462 6-7.998 6m0-14C6.48 4 2 8.841 2 12c0 3.086 4.576 8 10 8 5.423 0 10-4.914 10-8 0-3.159-4.48-8-10-8"></path>
<path d="M11.977 13.984c-1.103 0-2-.897-2-2s.897-2 2-2c1.104 0 2 .897 2 2s-.896 2-2 2m0-6c-2.206 0-4 1.794-4 4s1.794 4 4 4c2.207 0 4-1.794 4-4s-1.793-4-4-4"></path>
</svg>
how can I resize it? Is there maybe an online page when we can do that or a general rule for this?
SVG elements have no actual size, they are made up of vectors to precisely be displayed in any size.
The first problem with your SVG code is to have omitted the viewbox attribute.
You can calculate its values using the JS method: SVGGraphicsElement.getBBox().
In your case your viewBox is: viewBox="2 4 20 16"
Then simply change css values of width and height, according to the viewbox props (20 / 16).
this will be :
const mySVG = document.querySelector('#my-svg');
function toggleSize()
{
mySVG.classList.toggle('sz200');
}
svg {
width : 100px;
height : 80px;
margin : 20px;
background : blue;
fill : #D0D4D9;
fill-rule : evenodd;
}
.sz200 {
width : 200px;
height : 160px;
}
<button onclick="toggleSize()">toggle size: (100-80) | (200-160)</button>
<br>
<svg id="my-svg" viewBox="2 4 20 16" >
<path d="
M 12 18 c -4.536 0-7.999-4.26-7.999-6 0-2.001 3.459-6 8-6 4.376 0 7.998
3.973 7.998 6 0 1.74-3.462 6-7.998 6 m 0-14 C 6.48 4 2 8.841 2 12
c 0 3.086 4.576 8 10 8 5.423 0 10 -4.914 10-8 0 -3.159 -4.48 -8 -10 -8" />
<path d="
M 11.977 13.984 c -1.103 0-2-.897-2-2 s .897-2 2-2 c 1.104 0 2 .897 2 2
s -.896 2-2 2 m 0-6 c -2.206 0-4 1.794-4 4 s 1.794 4 4 4 c 2.207 0 4-1.794
4-4 s -1.793-4-4-4" />
</svg>
Change the height from 15 to auto
<svg
height="auto"
width="28"
fill="#D0D4D9"
fill-rule="evenodd"
>
<path
d="M12 18c-4.536 0-7.999-4.26-7.999-6 0-2.001 3.459-6 8-6 4.376 0 7.998 3.973 7.998 6 0 1.74-3.462 6-7.998 6m0-14C6.48 4 2 8.841 2 12c0 3.086 4.576 8 10 8 5.423 0 10-4.914 10-8 0-3.159-4.48-8-10-8"
></path>
<path
d="M11.977 13.984c-1.103 0-2-.897-2-2s.897-2 2-2c1.104 0 2 .897 2 2s-.896 2-2 2m0-6c-2.206 0-4 1.794-4 4s1.794 4 4 4c2.207 0 4-1.794 4-4s-1.793-4-4-4"
></path>
</svg>
I have an svg of the GitHub logo (taken from Simple Icons).
I would like to centre this svg in a circle so it looks something like this:
I've tried taking the path from the svg and creating another svg with that path and a circle, like:
svg {
padding: 5px;
fill: none;
stroke: black;
stroke-width: 1px;
stroke-linejoin: round;
}
svg:hover {
stroke: red;
}
<svg height="90" width="90">
<circle cx="48%" cy="48%" r="48%" />
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>
But I don't know how to centre the path in the circle, how would I do that?
The moment you start with translate
you will continue to stack <g> groups and translates like empty sushi plates at a party of 10
Instead, learn to edit MDN: SVG paths
Tool of choice: SVG Path Editor https://yqnn.github.io/svg-path-editor/
Copy/paste d-path
reduced presicion to 0 (for explanation purposes, but its always good to lower precision)
The path is:
M12 0c-7 0-12 5-12 12c0 5 3 10 8 11c1 0 1 0 1-1c0 0 0-1 0-2c-3 1-4-2-4-2C4 18 4 18 4 18
c-1-1 0-1 0-1c1 0 2 1 2 1c1 2 3 1 4 1c0-1 0-1 1-2c-3 0-6-1-6-6c0-1 1-2 1-3c0 0-1-2 0-3
c0 0 1 0 3 1c1 0 2 0 3 0c1 0 2 0 3 0c2-2 3-1 3-1c1 2 0 3 0 3c1 1 1 2 1 3c0 5-3 6-6 6
c0 0 1 1 1 2c0 2 0 3 0 3c0 0 0 1 1 1C21 22 24 18 24 12c0-7-5-12-12-12
Learn SVG: M and m are moves C and c are curves
capital M and C are absolute positioned points, we don't want those when we alter the path, because they would always stay at the absolute position
Convert to relative in the path editor
The path is:
m12 0c-7 0-12 5-12 12c0 5 3 10 8 11c1 0 1 0 1-1c0 0 0-1 0-2c-3 1-4-2-4-2c-1 0-1 0-1 0
c-1-1 0-1 0-1c1 0 2 1 2 1c1 2 3 1 4 1c0-1 0-1 1-2c-3 0-6-1-6-6c0-1 1-2 1-3c0 0-1-2 0-3
c0 0 1 0 3 1c1 0 2 0 3 0c1 0 2 0 3 0c2-2 3-1 3-1c1 2 0 3 0 3c1 1 1 2 1 3c0 5-3 6-6 6
c0 0 1 1 1 2c0 2 0 3 0 3c0 0 0 1 1 1c6-1 9-5 9-11c0-7-5-12-12-12
That first m12 0 is the start DRAWING position
In the editor we see:
the top-left is 0,0
the (square) image is 24 units wide
(SVG is a vector format, they are not pixels)
to add space for a circle the image needs to be moved 6 units right and 6 units down
That changes the viewBox="0 0 24 24" to: viewBox="0 0 30 30"
A viewBox="0 0 W H" is the most comfortable for your future SVG adventures.
A viewBox="-15 -15 15 15" is great when you do a lot of drawing around a (0,0) center point.
Now instead of using transform="translate(x y)",
you change the d-path start position from M12 0 to: M15 3
new x = x + 6/2 = 12 + 3 = 15
new y = y + 6/2 = 0 + 3 = 3
since it is the first path move, it doesn't matter if its m15 3 or M15 3
use an extra <rect> to always see the viewBox size
<svg height="90" width="90" viewBox="0 0 30 30">
<rect width="100%" height="100%" fill="pink"/>
<circle r="48%" cx="50%" cy="50%" fill="none" stroke-width="1" stroke="red" />
<path d="M15 3c-7 0-12 5-12 12c0 5 3 10 8 11c1 0 1 0 1-1c0 0 0-1 0-2c-3 1-4-2-4-2c-1 0-1 0-1 0
c-1-1 0-1 0-1c1 0 2 1 2 1c1 2 3 1 4 1c0-1 0-1 1-2c-3 0-6-1-6-6c0-1 1-2 1-3c0 0-1-2 0-3
c0 0 1 0 3 1c1 0 2 0 3 0c1 0 2 0 3 0c2-2 3-1 3-1c1 2 0 3 0 3c1 1 1 2 1 3c0 5-3 6-6 6
c0 0 1 1 1 2c0 2 0 3 0 3c0 0 0 1 1 1c6-1 9-5 9-11c0-7-5-12-12-12"/>
</svg>
End result:
One step (or giant leap) further is to write the <circle> as (part of) the d-path
using: http://complexdan.com/svg-circleellipse-to-path-converter/
The easier way would be drawing the circle and the path around the origin {x:0,y:0}. For this I've added a viewBox to the svg element whete the the first 2 paramaters (from x and from y) are negative. Now the center of the svg canvas is in the origin.
Next in order to center the circle around the origin I'm removing the cx and cy attributes (dhe default = 0)
In order to center the oath around the origin I'm calculating the bounding box and transtate the shape half width and half height to the left: transform="translate(-12,-12)"
console.log(pth.getBBox())
svg {
fill: none;
stroke: black;
stroke-width: 1px;
stroke-linejoin: round;
}
svg:hover {
stroke: red;
}
<svg height="90" width="90" viewBox="-20 -20 40 40">
<circle r="48%" />
<path id="pth" transform="translate(-12,-12)" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>
I used Illustrator to center the path and the circle
svg {
padding: 5px;
fill: none;
stroke: black;
stroke-width: 8;
stroke-linejoin: round;
}
svg:hover {
stroke: red;
}
<svg width="90" height="90" viewBox="0 0 600 600">
<circle cx="258.96" cy="258.96" r="257.88"/>
<path d="M258.96 81.73a181.74 181.74 0 00-57.47 354.15c9.09 1.71 12.42-3.91 12.42-8.74 0-4.32-.15-15.75-.23-30.89-50.55 11-61.21-24.38-61.21-24.38-8.27-21-20.22-26.58-20.22-26.58-16.46-11.27 1.27-11 1.27-11 18.25 1.27 27.84 18.72 27.84 18.72 16.2 27.79 42.54 19.76 52.93 15.11 1.64-11.75 6.32-19.76 11.51-24.31-40.36-4.54-82.78-20.17-82.78-89.81 0-19.84 7-36 18.7-48.76-2-4.59-8.18-23.06 1.59-48.1 0 0 15.22-4.88 50 18.63a171.34 171.34 0 0190.87 0c34.53-23.5 49.75-18.63 49.75-18.63 9.77 25 3.63 43.51 1.82 48.1 11.55 12.72 18.6 28.89 18.6 48.72 0 69.82-42.48 85.19-82.92 89.65 6.36 5.45 12.27 16.6 12.27 33.62 0 24.32-.23 43.86-.23 49.76 0 4.77 3.18 10.45 12.49 8.63a181.1 181.1 0 00124.73-172.16c0-100.36-81.37-181.73-181.73-181.73"/>
</svg>
Edit: An alternative way, numbers needed to be fine-tuned though, using a div instead of the circle:
div {
width: 90px;
height: 90px;
border: 3px solid black;
border-radius: 50%;
position: relative;
}
svg {
fill: none;
stroke: black;
stroke-width: 1;
stroke-linejoin: round;
}
svg path {
transform: translate(11px, 10.5px) scale(2.8);
}
.svg-container:hover {
border-color: red;
}
.svg-container:hover svg {
stroke: red;
}
<div class="svg-container">
<svg height="90" width="90">
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>
</div>
Put your circle in group and use transform="translate(x, y)".
<svg viewBox="0 0 400 400">
<g transform="translate(200, 200)">
<circle cx="0" cy="0" r="200" style="" fill="darkOrange"></circle>
</g>
</svg>
I want an svg as a favicon but I don't want to reference it as a separate file like so:
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
I want to put this icon I got from bootstrap as the icon without having to download it:
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527zM8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
</svg>
Is there a way to do this?
Only in CSS urls do the < and > need to be escaped. The only character that needs to be escaped is the # in color notations and links
fill="currentColor" does nothing; only when you use the SVG in the <body>
sizes attribute is not required, in my experiments
and the type attribute is no longer required say the docs.
Those Bootstrap Icons are bloated, can be made smaller, by multiplying the paths and changing viewBox
Makes the HTML file: (added linebreaks in the SVG only for demo purpose)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'>
<path d='M55 5a5 5 90 015-5h40a5 5 90 010 10h-10v11a70 70 90 0135 123l8 8a5 5 90 01-7 7l-9-9
a70 70 90 01-37 11a70 70 90 01-37-11l-9 9a5 5 90 01-7-7l8-8a70 70 90 0135-123v-11h-10
a5 5 90 01-5-5z
m-46 49a25 25 90 1135-35a80 80 90 00-35 35z
m126-44c-8 0-14 3-19 9a80 80 90 0135 35a25 25 90 00-16-44z
m-50 40a5 5 90 00-10 0v39l-15 29a5 5 90 109 5l15-30a5 5 90 001-2v-40z'/>
</svg>"
/>
</head>
<body></body>
</html>
Try using a data URL.
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' class='bi bi-alarm-fill' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6 .5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1H9v1.07a7.001 7.001 0 0 1 3.274 12.474l.601.602a.5.5 0 0 1-.707.708l-.746-.746A6.97 6.97 0 0 1 8 16a6.97 6.97 0 0 1-3.422-.892l-.746.746a.5.5 0 0 1-.707-.708l.602-.602A7.001 7.001 0 0 1 7 2.07V1h-.5A.5.5 0 0 1 6 .5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM11.613 1.86a2.5 2.5 0 1 1 3.527 3.527 8.035 8.035 0 0 0-3.527-3.527zM8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z'/%3E%3C/svg%3E" sizes="any" type="image/svg+xml">
Please see the snippet below. I have an svg icon whose width and height I've set to 80px each, however, the svg icon itself is not filling up that full size. How can I correctly adjust the size of an individual svg icon? Thanks!
svg {
background: pink
}
<svg width="80" height="80">
<rect width="24" height="24" fill="none" rx="0" ry="0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM19.8 12C19.8 16.3078 16.3078 19.8 12 19.8C7.69218 19.8 4.2 16.3078 4.2 12C4.2 7.69218 7.69218 4.2 12 4.2C16.3078 4.2 19.8 7.69218 19.8 12ZM12 17C14.7614 17 17 14.7614 17 12C17 9.94968 15.7659 8.1876 14 7.41604V9.12734C14.9067 9.75982 15.5 10.8106 15.5 12C15.5 13.933 13.933 15.5 12 15.5C10.067 15.5 8.5 13.933 8.5 12C8.5 10.8106 9.09326 9.75982 10 9.12734V7.41604C8.2341 8.1876 7 9.94968 7 12C7 14.7614 9.23858 17 12 17ZM12 6C11.5582 6 11.2 6.35817 11.2 6.8V9.2C11.2 9.64183 11.5582 10 12 10C12.4418 10 12.8 9.64183 12.8 9.2V6.8C12.8 6.35817 12.4418 6 12 6Z" fill="#303131"/>
</svg>
I'm not certain what your SVG's original proportions were, but if you insert them to the last two parameters of the viewBox attribute on the <svg> tag, that'll give it something familiar to scale up to 80/80px from!
(I've guessed at 24/24)
From MDN:
The value of the viewBox attribute is a list of four numbers: min-x, min-y, width and height. The numbers separated by whitespace and/or a comma, which specify a rectangle in user space which is mapped to the bounds of the viewport established for the associated SVG element (not the browser viewport).
(Emphasis mine)
svg {
background: pink
}
<svg width="80" height="80" viewBox="0 0 24 24">
<rect width="24" height="24" fill="none" rx="0" ry="0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM19.8 12C19.8 16.3078 16.3078 19.8 12 19.8C7.69218 19.8 4.2 16.3078 4.2 12C4.2 7.69218 7.69218 4.2 12 4.2C16.3078 4.2 19.8 7.69218 19.8 12ZM12 17C14.7614 17 17 14.7614 17 12C17 9.94968 15.7659 8.1876 14 7.41604V9.12734C14.9067 9.75982 15.5 10.8106 15.5 12C15.5 13.933 13.933 15.5 12 15.5C10.067 15.5 8.5 13.933 8.5 12C8.5 10.8106 9.09326 9.75982 10 9.12734V7.41604C8.2341 8.1876 7 9.94968 7 12C7 14.7614 9.23858 17 12 17ZM12 6C11.5582 6 11.2 6.35817 11.2 6.8V9.2C11.2 9.64183 11.5582 10 12 10C12.4418 10 12.8 9.64183 12.8 9.2V6.8C12.8 6.35817 12.4418 6 12 6Z" fill="#303131"/>
</svg>
Let's say I have an SVG like below, how could I add 10px padding to the top of the image? I've tried using style="padding-top: 10px" and transform="translate(0,10px)", but both end up cropping the bottom by 10px. Adjusting the viewport dimensions did not fix the cropping for me.
Note, I want to do this in the SVG code, not using external style. I thought it would be an easy tweak, but no..?
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 440.11 132.63">
<path fill="#fcaf17" fill-rule="evenodd" d="M273.04 103.72c-25.57 18.87-62.64 28.9-94.57 28.9A171.14 171.14 0 0 1 62.95 88.56c-2.38-2.16-.25-5.12 2.63-3.45 32.89 19.2 73.6 30.68 115.6 30.68a229.73 229.73 0 0 0 88.16-18.05c4.32-1.83 7.95 2.86 3.72 6"/>
<path fill="#fcaf17" fill-rule="evenodd" d="M283.68 91.57c-3.27-4.19-21.62-2-29.87-1-2.49.3-2.87-1.88-.62-3.45 14.63-10.29 38.61-7.31 41.4-3.88s-.73 27.52-14.45 39c-2.11 1.77-4.12.81-3.18-1.51 3.09-7.71 10-25 6.72-29.16"/>
<path fill="#231f20" fill-rule="evenodd" d="M254.4 14.48v-10a2.48 2.48 0 0 1 2.53-2.54h44.78a2.5 2.5 0 0 1 2.58 2.53v8.56c0 1.43-1.22 3.31-3.38 6.29l-23.18 33.12c8.6-.21 17.72 1.08 25.53 5.48a4.54 4.54 0 0 1 2.37 3.9v10.66c0 1.47-1.6 3.17-3.28 2.27a51.59 51.59 0 0 0-47.31.1c-1.57.82-3.19-.85-3.19-2.32V62.42a12 12 0 0 1 1.66-6.87L280.38 17h-23.39a2.49 2.49 0 0 1-2.59-2.52M91.08 76.88H77.46a2.56 2.56 0 0 1-2.44-2.3V4.66a2.57 2.57 0 0 1 2.64-2.51h12.68a2.56 2.56 0 0 1 2.48 2.35v9.13h.26C96.38 4.8 102.61.68 111 .68s13.86 4.12 17.68 12.95C131.98 4.8 139.48.68 147.49.68a19.32 19.32 0 0 1 15.77 7.63c4.32 5.87 3.44 14.41 3.44 21.92v44.11a2.57 2.57 0 0 1-2.63 2.52h-13.62a2.55 2.55 0 0 1-2.44-2.51V37.31c0-2.94.25-10.29-.39-13.09-1-4.71-4.07-6-8-6a9 9 0 0 0-8.14 5.74c-1.41 3.49-1.3 9.35-1.3 13.35v37.06a2.57 2.57 0 0 1-2.63 2.52h-13.58a2.55 2.55 0 0 1-2.44-2.51V37.31c0-7.79 1.26-19.27-8.4-19.27s-9.41 11.18-9.41 19.27v37.06a2.56 2.56 0 0 1-2.62 2.52M342.83.67c20.22 0 31.15 17.37 31.15 39.43 0 21.33-12.08 38.25-31.15 38.25-19.84 0-30.64-17.36-30.64-39 0-21.78 10.93-38.7 30.64-38.7m.13 14.27c-10 0-10.68 13.68-10.68 22.21s-.12 26.79 10.55 26.79S353.9 49.2 353.9 40.23c0-5.89-.26-12.95-2-18.54-1.53-4.85-4.58-6.77-8.9-6.77M400.18 76.88h-13.55a2.56 2.56 0 0 1-2.44-2.51V4.42a2.59 2.59 0 0 1 2.63-2.27h12.63a2.58 2.58 0 0 1 2.42 1.95v10.69h.25C405.94 5.23 411.28.68 420.68.68c6.11 0 12.08 2.2 15.9 8.24 3.57 5.58 3.57 15 3.57 21.77v44a2.6 2.6 0 0 1-2.62 2.21h-13.68a2.58 2.58 0 0 1-2.43-2.21v-38c0-7.64.9-18.82-8.52-18.82a8.9 8.9 0 0 0-7.88 5.59c-1.9 4.26-2.17 8.52-2.17 13.23v37.65a2.6 2.6 0 0 1-2.65 2.52M218.71 43.49c0 5.31.12 9.73-2.55 14.45-2.17 3.83-5.6 6.19-9.43 6.19-5.23 0-8.29-4-8.29-9.88 0-11.59 10.41-13.7 20.27-13.7zm13.73 33.21a2.8 2.8 0 0 1-3.21.32c-4.53-3.76-5.34-5.5-7.81-9.07-7.48 7.61-12.78 9.9-22.46 9.9-11.47 0-20.39-7.08-20.39-21.24 0-11.05 6-18.57 14.52-22.26 7.4-3.24 17.72-3.83 25.62-4.71v-1.77c0-3.26.25-7.09-1.66-9.88-1.65-2.52-4.84-3.54-7.65-3.54-5.19 0-9.8 2.66-10.95 8.18a2.85 2.85 0 0 1-2.36 2.5l-13.2-1.43a2.39 2.39 0 0 1-2-2.84c3-16 17.5-20.86 30.46-20.86 6.62 0 15.29 1.77 20.51 6.78 6.63 6.19 6 14.45 6 23.45v21.22c0 6.38 2.65 9.17 5.15 12.62.86 1.24 1.06 2.71-.05 3.61a531.33 531.33 0 0 0-10.48 9.06zM40.18 43.49c0 5.31.12 9.73-2.55 14.45-2.17 3.83-5.6 6.19-9.43 6.19-5.23 0-8.29-4-8.29-9.88 0-11.59 10.42-13.7 20.27-13.7zM53.91 76.7a2.8 2.8 0 0 1-3.21.32c-4.53-3.76-5.34-5.5-7.82-9.07-7.47 7.61-12.76 9.9-22.45 9.9C8.97 77.85.04 70.77.04 56.61c0-11.05 6-18.57 14.53-22.26 7.39-3.24 17.71-3.83 25.61-4.71v-1.77c0-3.26.26-7.09-1.66-9.88-1.65-2.52-4.84-3.54-7.65-3.54-5.19 0-9.81 2.66-10.94 8.18a2.87 2.87 0 0 1-2.36 2.5L4.37 23.7a2.4 2.4 0 0 1-2-2.84C5.37 4.86 19.87 0 32.83 0c6.62 0 15.29 1.77 20.52 6.78 6.63 6.19 6 14.45 6 23.45v21.22c0 6.38 2.65 9.17 5.14 12.62.87 1.24 1.06 2.71 0 3.61a599.2 599.2 0 0 0-10.44 9.06z"/>
</svg>
Just alter the viewBox. You might need to experiment a bit to find the values you need.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -20 440.11 152.63">
<path fill="#fcaf17" fill-rule="evenodd" d="M273.04 103.72c-25.57 18.87-62.64 28.9-94.57 28.9A171.14 171.14 0 0 1 62.95 88.56c-2.38-2.16-.25-5.12 2.63-3.45 32.89 19.2 73.6 30.68 115.6 30.68a229.73 229.73 0 0 0 88.16-18.05c4.32-1.83 7.95 2.86 3.72 6"/>
<path fill="#fcaf17" fill-rule="evenodd" d="M283.68 91.57c-3.27-4.19-21.62-2-29.87-1-2.49.3-2.87-1.88-.62-3.45 14.63-10.29 38.61-7.31 41.4-3.88s-.73 27.52-14.45 39c-2.11 1.77-4.12.81-3.18-1.51 3.09-7.71 10-25 6.72-29.16"/>
<path fill="#231f20" fill-rule="evenodd" d="M254.4 14.48v-10a2.48 2.48 0 0 1 2.53-2.54h44.78a2.5 2.5 0 0 1 2.58 2.53v8.56c0 1.43-1.22 3.31-3.38 6.29l-23.18 33.12c8.6-.21 17.72 1.08 25.53 5.48a4.54 4.54 0 0 1 2.37 3.9v10.66c0 1.47-1.6 3.17-3.28 2.27a51.59 51.59 0 0 0-47.31.1c-1.57.82-3.19-.85-3.19-2.32V62.42a12 12 0 0 1 1.66-6.87L280.38 17h-23.39a2.49 2.49 0 0 1-2.59-2.52M91.08 76.88H77.46a2.56 2.56 0 0 1-2.44-2.3V4.66a2.57 2.57 0 0 1 2.64-2.51h12.68a2.56 2.56 0 0 1 2.48 2.35v9.13h.26C96.38 4.8 102.61.68 111 .68s13.86 4.12 17.68 12.95C131.98 4.8 139.48.68 147.49.68a19.32 19.32 0 0 1 15.77 7.63c4.32 5.87 3.44 14.41 3.44 21.92v44.11a2.57 2.57 0 0 1-2.63 2.52h-13.62a2.55 2.55 0 0 1-2.44-2.51V37.31c0-2.94.25-10.29-.39-13.09-1-4.71-4.07-6-8-6a9 9 0 0 0-8.14 5.74c-1.41 3.49-1.3 9.35-1.3 13.35v37.06a2.57 2.57 0 0 1-2.63 2.52h-13.58a2.55 2.55 0 0 1-2.44-2.51V37.31c0-7.79 1.26-19.27-8.4-19.27s-9.41 11.18-9.41 19.27v37.06a2.56 2.56 0 0 1-2.62 2.52M342.83.67c20.22 0 31.15 17.37 31.15 39.43 0 21.33-12.08 38.25-31.15 38.25-19.84 0-30.64-17.36-30.64-39 0-21.78 10.93-38.7 30.64-38.7m.13 14.27c-10 0-10.68 13.68-10.68 22.21s-.12 26.79 10.55 26.79S353.9 49.2 353.9 40.23c0-5.89-.26-12.95-2-18.54-1.53-4.85-4.58-6.77-8.9-6.77M400.18 76.88h-13.55a2.56 2.56 0 0 1-2.44-2.51V4.42a2.59 2.59 0 0 1 2.63-2.27h12.63a2.58 2.58 0 0 1 2.42 1.95v10.69h.25C405.94 5.23 411.28.68 420.68.68c6.11 0 12.08 2.2 15.9 8.24 3.57 5.58 3.57 15 3.57 21.77v44a2.6 2.6 0 0 1-2.62 2.21h-13.68a2.58 2.58 0 0 1-2.43-2.21v-38c0-7.64.9-18.82-8.52-18.82a8.9 8.9 0 0 0-7.88 5.59c-1.9 4.26-2.17 8.52-2.17 13.23v37.65a2.6 2.6 0 0 1-2.65 2.52M218.71 43.49c0 5.31.12 9.73-2.55 14.45-2.17 3.83-5.6 6.19-9.43 6.19-5.23 0-8.29-4-8.29-9.88 0-11.59 10.41-13.7 20.27-13.7zm13.73 33.21a2.8 2.8 0 0 1-3.21.32c-4.53-3.76-5.34-5.5-7.81-9.07-7.48 7.61-12.78 9.9-22.46 9.9-11.47 0-20.39-7.08-20.39-21.24 0-11.05 6-18.57 14.52-22.26 7.4-3.24 17.72-3.83 25.62-4.71v-1.77c0-3.26.25-7.09-1.66-9.88-1.65-2.52-4.84-3.54-7.65-3.54-5.19 0-9.8 2.66-10.95 8.18a2.85 2.85 0 0 1-2.36 2.5l-13.2-1.43a2.39 2.39 0 0 1-2-2.84c3-16 17.5-20.86 30.46-20.86 6.62 0 15.29 1.77 20.51 6.78 6.63 6.19 6 14.45 6 23.45v21.22c0 6.38 2.65 9.17 5.15 12.62.86 1.24 1.06 2.71-.05 3.61a531.33 531.33 0 0 0-10.48 9.06zM40.18 43.49c0 5.31.12 9.73-2.55 14.45-2.17 3.83-5.6 6.19-9.43 6.19-5.23 0-8.29-4-8.29-9.88 0-11.59 10.42-13.7 20.27-13.7zM53.91 76.7a2.8 2.8 0 0 1-3.21.32c-4.53-3.76-5.34-5.5-7.82-9.07-7.47 7.61-12.76 9.9-22.45 9.9C8.97 77.85.04 70.77.04 56.61c0-11.05 6-18.57 14.53-22.26 7.39-3.24 17.71-3.83 25.61-4.71v-1.77c0-3.26.26-7.09-1.66-9.88-1.65-2.52-4.84-3.54-7.65-3.54-5.19 0-9.81 2.66-10.94 8.18a2.87 2.87 0 0 1-2.36 2.5L4.37 23.7a2.4 2.4 0 0 1-2-2.84C5.37 4.86 19.87 0 32.83 0c6.62 0 15.29 1.77 20.52 6.78 6.63 6.19 6 14.45 6 23.45v21.22c0 6.38 2.65 9.17 5.14 12.62.87 1.24 1.06 2.71 0 3.61a599.2 599.2 0 0 0-10.44 9.06z"/>
</svg>
I had to convert the svg file to base 64 and insert it inside of an image tag with a style:
<img alt="logo" style="padding-top:10px" src="data:image/svg+xml;base64,
PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA
0NDAuMTEgMTMyLjYzIj4NCiAgPHBhdGggZmlsbD0iI2ZjYWYxNyIgZmlsbC1ydWxlPSJldm
Vub2RkIiBkPSJNMjczLjA0IDEwMy43MmMtMjUuNTcgMTguODctNjIuNjQgMjguOS05NC41N
yAyOC45QTE3MS4xNCAxNzEuMTQgMCAwIDEgNjIuOTUgODguNTZjLTIuMzgtMi4xNi0uMjUt
NS4xMiAyLjYzLTMuNDUgMzIuODkgMTkuMiA3My42IDMwLjY4IDExNS42IDMwLjY4YTIyOS4
3MyAyMjkuNzMgMCAwIDAgODguMTYtMTguMDVjNC4zMi0xLjgzIDcuOTUgMi44NiAzLjcyID
YiLz4NCiAgPHBhdGggZmlsbD0iI2ZjYWYxNyIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNM
jgzLjY4IDkxLjU3Yy0zLjI3LTQuMTktMjEuNjItMi0yOS44Ny0xLTIuNDkuMy0yLjg3LTEu
ODgtLjYyLTMuNDUgMTQuNjMtMTAuMjkgMzguNjEtNy4zMSA0MS40LTMuODhzLS43MyAyNy4
1Mi0xNC40NSAzOWMtMi4xMSAxLjc3LTQuMTIuODEtMy4xOC0xLjUxIDMuMDktNy43MSAxMC
0yNSA2LjcyLTI5LjE2Ii8+DQogIDxwYXRoIGZpbGw9IiMyMzFmMjAiIGZpbGwtcnVsZT0iZ
XZlbm9kZCIgZD0iTTI1NC40IDE0LjQ4di0xMGEyLjQ4IDIuNDggMCAwIDEgMi41My0yLjU0
aDQ0Ljc4YTIuNSAyLjUgMCAwIDEgMi41OCAyLjUzdjguNTZjMCAxLjQzLTEuMjIgMy4zMS0
zLjM4IDYuMjlsLTIzLjE4IDMzLjEyYzguNi0uMjEgMTcuNzIgMS4wOCAyNS41MyA1LjQ4YT
QuNTQgNC41NCAwIDAgMSAyLjM3IDMuOXYxMC42NmMwIDEuNDctMS42IDMuMTctMy4yOCAyL
jI3YTUxLjU5IDUxLjU5IDAgMCAwLTQ3LjMxLjFjLTEuNTcuODItMy4xOS0uODUtMy4xOS0y
LjMyVjYyLjQyYTEyIDEyIDAgMCAxIDEuNjYtNi44N0wyODAuMzggMTdoLTIzLjM5YTIuNDk
gMi40OSAwIDAgMS0yLjU5LTIuNTJNOTEuMDggNzYuODhINzcuNDZhMi41NiAyLjU2IDAgMC
AxLTIuNDQtMi4zVjQuNjZhMi41NyAyLjU3IDAgMCAxIDIuNjQtMi41MWgxMi42OGEyLjU2I
DIuNTYgMCAwIDEgMi40OCAyLjM1djkuMTNoLjI2Qzk2LjM4IDQuOCAxMDIuNjEuNjggMTEx
IC42OHMxMy44NiA0LjEyIDE3LjY4IDEyLjk1QzEzMS45OCA0LjggMTM5LjQ4LjY4IDE0Ny4
0OS42OGExOS4zMiAxOS4zMiAwIDAgMSAxNS43NyA3LjYzYzQuMzIgNS44NyAzLjQ0IDE0Lj
QxIDMuNDQgMjEuOTJ2NDQuMTFhMi41NyAyLjU3IDAgMCAxLTIuNjMgMi41MmgtMTMuNjJhM
i41NSAyLjU1IDAgMCAxLTIuNDQtMi41MVYzNy4zMWMwLTIuOTQuMjUtMTAuMjktLjM5LTEz
LjA5LTEtNC43MS00LjA3LTYtOC02YTkgOSAwIDAgMC04LjE0IDUuNzRjLTEuNDEgMy40OS0
xLjMgOS4zNS0xLjMgMTMuMzV2MzcuMDZhMi41NyAyLjU3IDAgMCAxLTIuNjMgMi41MmgtMT
MuNThhMi41NSAyLjU1IDAgMCAxLTIuNDQtMi41MVYzNy4zMWMwLTcuNzkgMS4yNi0xOS4yN
y04LjQtMTkuMjdzLTkuNDEgMTEuMTgtOS40MSAxOS4yN3YzNy4wNmEyLjU2IDIuNTYgMCAw
IDEtMi42MiAyLjUyTTM0Mi44My42N2MyMC4yMiAwIDMxLjE1IDE3LjM3IDMxLjE1IDM5LjQ
zIDAgMjEuMzMtMTIuMDggMzguMjUtMzEuMTUgMzguMjUtMTkuODQgMC0zMC42NC0xNy4zNi
0zMC42NC0zOSAwLTIxLjc4IDEwLjkzLTM4LjcgMzAuNjQtMzguN20uMTMgMTQuMjdjLTEwI
DAtMTAuNjggMTMuNjgtMTAuNjggMjIuMjFzLS4xMiAyNi43OSAxMC41NSAyNi43OVMzNTMu
OSA0OS4yIDM1My45IDQwLjIzYzAtNS44OS0uMjYtMTIuOTUtMi0xOC41NC0xLjUzLTQuODU
tNC41OC02Ljc3LTguOS02Ljc3TTQwMC4xOCA3Ni44OGgtMTMuNTVhMi41NiAyLjU2IDAgMC
AxLTIuNDQtMi41MVY0LjQyYTIuNTkgMi41OSAwIDAgMSAyLjYzLTIuMjdoMTIuNjNhMi41O
CAyLjU4IDAgMCAxIDIuNDIgMS45NXYxMC42OWguMjVDNDA1Ljk0IDUuMjMgNDExLjI4LjY4
IDQyMC42OC42OGM2LjExIDAgMTIuMDggMi4yIDE1LjkgOC4yNCAzLjU3IDUuNTggMy41NyA
xNSAzLjU3IDIxLjc3djQ0YTIuNiAyLjYgMCAwIDEtMi42MiAyLjIxaC0xMy42OGEyLjU4ID
IuNTggMCAwIDEtMi40My0yLjIxdi0zOGMwLTcuNjQuOS0xOC44Mi04LjUyLTE4LjgyYTguO
SA4LjkgMCAwIDAtNy44OCA1LjU5Yy0xLjkgNC4yNi0yLjE3IDguNTItMi4xNyAxMy4yM3Yz
Ny42NWEyLjYgMi42IDAgMCAxLTIuNjUgMi41Mk0yMTguNzEgNDMuNDljMCA1LjMxLjEyIDk
uNzMtMi41NSAxNC40NS0yLjE3IDMuODMtNS42IDYuMTktOS40MyA2LjE5LTUuMjMgMC04Lj
I5LTQtOC4yOS05Ljg4IDAtMTEuNTkgMTAuNDEtMTMuNyAyMC4yNy0xMy43em0xMy43MyAzM
y4yMWEyLjggMi44IDAgMCAxLTMuMjEuMzJjLTQuNTMtMy43Ni01LjM0LTUuNS03LjgxLTku
MDctNy40OCA3LjYxLTEyLjc4IDkuOS0yMi40NiA5LjktMTEuNDcgMC0yMC4zOS03LjA4LTI
wLjM5LTIxLjI0IDAtMTEuMDUgNi0xOC41NyAxNC41Mi0yMi4yNiA3LjQtMy4yNCAxNy43Mi
0zLjgzIDI1LjYyLTQuNzF2LTEuNzdjMC0zLjI2LjI1LTcuMDktMS42Ni05Ljg4LTEuNjUtM
i41Mi00Ljg0LTMuNTQtNy42NS0zLjU0LTUuMTkgMC05LjggMi42Ni0xMC45NSA4LjE4YTIu
ODUgMi44NSAwIDAgMS0yLjM2IDIuNWwtMTMuMi0xLjQzYTIuMzkgMi4zOSAwIDAgMS0yLTI
uODRjMy0xNiAxNy41LTIwLjg2IDMwLjQ2LTIwLjg2IDYuNjIgMCAxNS4yOSAxLjc3IDIwLj
UxIDYuNzggNi42MyA2LjE5IDYgMTQuNDUgNiAyMy40NXYyMS4yMmMwIDYuMzggMi42NSA5L
jE3IDUuMTUgMTIuNjIuODYgMS4yNCAxLjA2IDIuNzEtLjA1IDMuNjFhNTMxLjMzIDUzMS4z
MyAwIDAgMC0xMC40OCA5LjA2ek00MC4xOCA0My40OWMwIDUuMzEuMTIgOS43My0yLjU1IDE
0LjQ1LTIuMTcgMy44My01LjYgNi4xOS05LjQzIDYuMTktNS4yMyAwLTguMjktNC04LjI5LT
kuODggMC0xMS41OSAxMC40Mi0xMy43IDIwLjI3LTEzLjd6TTUzLjkxIDc2LjdhMi44IDIuO
CAwIDAgMS0zLjIxLjMyYy00LjUzLTMuNzYtNS4zNC01LjUtNy44Mi05LjA3LTcuNDcgNy42
MS0xMi43NiA5LjktMjIuNDUgOS45QzguOTcgNzcuODUuMDQgNzAuNzcuMDQgNTYuNjFjMC0
xMS4wNSA2LTE4LjU3IDE0LjUzLTIyLjI2IDcuMzktMy4yNCAxNy43MS0zLjgzIDI1LjYxLT
QuNzF2LTEuNzdjMC0zLjI2LjI2LTcuMDktMS42Ni05Ljg4LTEuNjUtMi41Mi00Ljg0LTMuN
TQtNy42NS0zLjU0LTUuMTkgMC05LjgxIDIuNjYtMTAuOTQgOC4xOGEyLjg3IDIuODcgMCAw
IDEtMi4zNiAyLjVMNC4zNyAyMy43YTIuNCAyLjQgMCAwIDEtMi0yLjg0QzUuMzcgNC44NiA
xOS44NyAwIDMyLjgzIDBjNi42MiAwIDE1LjI5IDEuNzcgMjAuNTIgNi43OCA2LjYzIDYuMT
kgNiAxNC40NSA2IDIzLjQ1djIxLjIyYzAgNi4zOCAyLjY1IDkuMTcgNS4xNCAxMi42Mi44N
yAxLjI0IDEuMDYgMi43MSAwIDMuNjFhNTk5LjIgNTk5LjIgMCAwIDAtMTAuNDQgOS4wNnoi
Lz4NCjwvc3ZnPg==">