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">
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 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);
}
I'm using a predesigned menu which has been used svg for drawing icons.
For some reasons, I have to change icon size using path element.
Now, I want to change icon and I have my own custom icons; So, I downloaded some svg icon of web, BUT icons which has been used by me, have the same size that they had, even if I use large svg icons made by material design icons.
This is my Original path element:
<path class="Shape" d="M4.7 29.3a3.7 3.7 0 1 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.7zM4.4 8a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 0 1 0 7.3H4.4zm0 42a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.4z"/>
And this is my svg structure:
<svg class="menu" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 792 792">
<defs>
<path class="path-1" d="M45 67.9c0 2.3 1.9 4.1 4.2 4.1a4.1 4.1 0 1 0 0-8.3 4.1 4.1 0 0 0-4.1 4.2zm6 0c0 1-.8 1.7-1.8 1.7s-1.8-.7-1.8-1.7.8-1.8 1.8-1.8 1.8.7 1.8 1.8z"/>
</defs>
<g class="All-on" fill="none" fill-rule="evenodd" transform="translate(-571 -143)">
<g class="menu" transform="translate(571 143)">
<g class="outside-layer">
<circle class="outer-cirlce-background" cx="396" cy="396" r="396" fill="#000" fill-opacity=".4"/>
<g class="more-menu" transform="translate(654 229)">
<g class="writing-button" transform="translate(24 120)">
<title>My Posts</title>
<circle class="Oval-2-Copy-11" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M66.7 53.6l-.3.5-1.3 1.8-.3.4-.1.3V60l-.2.3v.1c-.3 1-1 1.4-2.3 1.4h-4.5l-.6.1a9 9 0 0 0-4 1.6l-1.7 1.1-.5.4-1.5 1a302.7 302.7 0 0 0-4 2.6c-.2 0-.3-.1-.5-.3L41.5 66l-1.7-1-.4-.4a141.7 141.7 0 0 1-3-1.8 9 9 0 0 0-2.6-.9h-.1a15.6 15.6 0 0 0-1.4 0h-3.7c-1.2 0-2-.6-2.3-1.5v-.1l-.1-.3V39c0-1.8.7-2.6 2.5-2.6h27.5l.7-2.1H28.7C25.8 34.3 24 36 24 39v21l.1.4a4.5 4.5 0 0 0 .4 1.4v.2l.4.5.2.1c0 .2.2.3.3.4l.2.2a3.4 3.4 0 0 0 .7.4 3.2 3.2 0 0 0 .8.3l.5.1.5.1h4.2l1 .1h.2a7.3 7.3 0 0 1 2.7 1l.3.2.9.6 2.6 1.7v.1l3.7 2.5a3 3 0 0 0 1.7.5 3 3 0 0 0 1.7-.5l3.6-2.5h.1l2.6-1.8 1-.6.2-.2.6-.3c.7-.4 1.4-.6 2.1-.7h5l.3-.1h.6l.5-.2h.3l.5-.3a2.8 2.8 0 0 0 .7-.4 5.3 5.3 0 0 0 .5-.6 3.9 3.9 0 0 0 .8-1.4l.2-.8v-6.9.1z"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M70 25.6l-4-1.2a3 3 0 0 0-1.9 0c-.9.3-1.6 1.1-2 2.1l-.4 1.4-.2.5-.2.7-6.7 20.6.1 8.5v.2c.3.8.7 1.4 1.4 1.7.5.3 1.2.4 1.8.1.4-.1.8-.4 1.2-.8 1.2-1.5 2.4-3 3.4-4.6l1.6-2.3.1-.1 6.3-19.2.6-1.6.6-1.8c.6-1.9-.2-3.6-1.8-4.2zM56.3 50l6.4-19.5.6.2.7.3-6.3 19.3c-.6.2-1 .2-1.4 0V50zm4.1 1.4c-1.5.2-2-.6-2.1-.8l6.3-19.4 2.3.8-6.5 19.4zm.9 2.4a62 62 0 0 1-3 4l-1.9-.7v-6l1.4-.1c.3.5 1 1.2 2.7 1 .1.4.5.8 1.4.9l-.6 1zm1.5-2.2l-.4.6c-1 0-1.3-.3-1.4-.5l6.5-19.5 1.5.5-6.2 19zm7.4-22.4l-.6 1.9-5.8-2-.6-.1.2-.6.4-1.3c.3-1 1-1.4 1.8-1.2l3.8 1.3c.8.3 1.1 1.1.8 2z"/>
</g>
<g class="new-button">
<title>New Posts</title>
<circle class="Oval-2-Copy-13" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M46.1 46.5H36c-.4 0-.8.3-.8.8v1.5c0 .4.4.7.8.7h10.1c.2 0 .4.2.4.4V60c0 .4.3.8.8.8h1.5c.4 0 .7-.4.7-.8V49.9c0-.2.2-.4.4-.4H60c.4 0 .8-.3.8-.8v-1.5c0-.4-.4-.7-.8-.7H49.9a.4.4 0 0 1-.4-.4V36c0-.4-.3-.8-.8-.8h-1.5c-.4 0-.7.4-.7.8v10.1c0 .2-.2.4-.4.4z"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M48 69a21 21 0 1 0 0-42 21 21 0 0 0 0 42zm0 3a24 24 0 1 1 0-48 24 24 0 0 1 0 48z"/>
</g>
<g class="bin-button" transform="translate(0 240)">
<title>Deleted Posts</title>
<circle class="Oval-2-Copy-12" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M57 28v-3.8H39.2V28h-10v8.2h4.4v35.5h29V36.3h4.3V28H57zm-15.7-1.8h13.6v1.9H41.3v-1.9zm19.2 43.6H35.7V36.3h24.8v33.5zM65 34.2H31.3v-4H65v4z"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M41 42.7h2v20.7h-2zm6.1 0h2v20.7h-2zm6.1 0h2.1v20.7h-2.1z"/>
</g>
</g>
<g class="home-menu" transform="translate(229 18)">
<g class="portfolio-button" transform="translate(119)">
<title>Portfolio</title>
<circle class="Oval-2-Copy-4" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M71.6 46v-5.6c0-3.5-2.9-6.4-6.4-6.4h-7l-1-3.5c-.6-1.8-2.3-3-4.1-3H42.9a4.3 4.3 0 0 0-4 3L37.8 34h-7a6.4 6.4 0 0 0-6.4 6.4V46c0 .5.3.9.7 1l1 .4v15.5c0 3.5 2.8 6.4 6.4 6.4h31c3.6 0 6.5-2.9 6.5-6.4V47.3l1-.4c.3-.1.6-.5.6-1zM40.9 31c.3-.9 1.1-1.5 2-1.5h10.2c.9 0 1.7.6 2 1.5l.9 3H40l1-3zm-14.3 9.3c0-2.3 1.9-4.2 4.2-4.2h34.4a4.3 4.3 0 0 1 4.2 4.2v4.8L48 53.5l-21.4-8.3v-4.8zm41.2 22.4a4.3 4.3 0 0 1-4.2 4.3H32.4c-2.3 0-4.2-2-4.2-4.3V48l19.4 7.5h.8L67.8 48v14.7z"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M52.5 45a4.5 4.5 0 1 0-9 0 4.5 4.5 0 0 0 9 0zm-6.8 0a2.3 2.3 0 1 1 2.3 2.3c-1.3 0-2.3-1-2.3-2.4z"/>
</g>
<g class="testimonials-button" transform="translate(0 23)">
<title>Testimonials</title>
<circle class="Oval-2-Copy-6" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M52.9 64.6c-.7 0-1.3-.1-1.8-.5-.5-.3-1.2-1-1.1-2.5 0-2 1.7-3 2.9-3.6l.4-.2c1.6-1 2.8-1.7 3.8-2.6 2-1.7 3-3.2 2.9-3.6l-.3-.1-1.1-.2-1-.1a8.9 8.9 0 0 1-7.7-9.1 10.8 10.8 0 0 1 21.6 0c0 7-3.6 16.9-13.7 21.1l-.3.1c-1.1.5-3 1.3-4.6 1.3zm7.8-31.3c-4.8 0-8.8 4-8.8 8.8 0 3.8 2.2 6.5 6 7.2h.8l1.6.3c1.2.4 1.5 1.2 1.6 1.7.3 1.8-2 4.2-3.6 5.4-1 1-2.4 1.8-4 2.8l-.5.2c-1.2.6-1.9 1-1.9 1.9 0 .5.1.8.3.9.6.4 2.1 0 4.6-1l.2-.1a20.8 20.8 0 0 0 12.6-19.3c0-5-4-8.8-8.9-8.8zM27.4 64.6c-.7 0-1.3-.1-1.8-.5-.5-.3-1.2-1-1.1-2.5 0-2 1.7-3 2.9-3.6l.4-.2c1.6-1 2.8-1.7 3.8-2.6 2-1.7 3-3.2 2.9-3.6l-.3-.1-1.1-.2-1-.1a8.9 8.9 0 0 1-7.6-9.1 10.8 10.8 0 0 1 21.5 0 23 23 0 0 1-13.7 21.1l-.2.1c-1.2.5-3 1.3-4.7 1.3zm7.8-31.3c-4.8 0-8.8 4-8.8 8.8 0 3.8 2.2 6.5 6 7.2h.8l1.6.3c1.2.4 1.5 1.2 1.6 1.7.4 1.8-2 4.2-3.5 5.4-1.2 1-2.5 1.8-4.2 2.8l-.4.2c-1.1.6-1.9 1-1.9 1.9 0 .5.1.8.3.9.9.6 3.7-.6 4.6-1l.2-.1a20.8 20.8 0 0 0 12.6-19.3c0-5-3.9-8.8-8.9-8.8z"/>
</g>
<g class="contact-button" transform="translate(239 23)">\
<title>Contact Us</title>
<circle class="Oval-2-Copy-5" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M40.4 42.7c1.4 0 1.4 2 0 2H29.1L36 56.3l7-7c1.1-1 2.5.4 1.6 1.4L37 58.2l3.4 6h21.5a290 290 0 0 0-6.5-10c-.7-1.3 1-2.4 1.8-1.2l2.5 3.8h9l-.4-4.7H57.9c-1.4 0-1.4-2 0-2h10.2l-.4-5.4h-5.8c-1.4 0-1.4-2 0-2h6.7c.6 0 1.1.3 1.1 1 .6 7 1.6 14.5 1.9 21.4a1 1 0 0 1-1.1 1H25.4a1 1 0 0 1-1-1l1.9-21.5c0-.4.5-1 1.1-1h13zM28.2 47l-1.6 17H38l-9.7-17zm36 17h5.2l-.5-5.3h-8l3.3 5.4zm-14-9.2c-2.7-3.3-8.7-11.7-8.7-16.1 0-5.4 4.4-9.4 9.6-9.4 5.1 0 9.7 4 9.7 9.4 0 4.4-6.1 12.8-9 16.1-.3.6-1 .5-1.5 0zm.9-2.2c2.3-2.8 7.5-10.5 7.5-14 0-4.2-3.5-7.1-7.5-7.1s-7.4 3-7.4 7.2c0 3.4 5.2 11.1 7.4 14zm0-19c2.3 0 4.2 2 4.2 4.3 0 2.2-1.9 4-4.2 4a4.1 4.1 0 0 1 0-8.2zm0 2.1c-1.1 0-2 1-2 2.2 0 1 .9 2 2 2a2 2 0 0 0 2.1-2c0-1.3-.9-2.2-2.1-2.2z"/>
</g>
</g>
<g class="settings-menu" transform="translate(228 654)">
<g class="security-button" transform="translate(120 24)">
<title>Secuirty Settings</title>
<circle class="Oval-2-Copy-8" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M48.2 64.6c.5 0 1-.5 1-1v-4.8A4 4 0 0 0 48 51a4 4 0 0 0-.9 8v4.6c0 .6.5 1 1 1zM46 55a2 2 0 1 1 3.9 0 2 2 0 0 1-4 0zm19.2-3.1c.5 0 1-.5 1-1v-4c0-2.2-1.9-4-4.2-4h-3.3v-8.3a10.6 10.6 0 0 0-21.3 0v8.2h-3.3A4.2 4.2 0 0 0 30 47v20.4c0 2.3 1.9 4.2 4.2 4.2h28c2.2 0 4.1-1.9 4.1-4.2V57.3a1 1 0 1 0-2 0v10.1c0 1.2-1 2.1-2.2 2.1h-28a2 2 0 0 1-2-2V47a2 2 0 0 1 2-2.1h28a2 2 0 0 1 2.1 2v4c0 .5.5 1 1 1zm-8.6-9h-17v-8.3a8.5 8.5 0 0 1 17 0v8.2z"/>
</g>
<g class="profile-button">
<title>Profile Settings</title>
<circle class="Oval-2-Copy-9" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M60.7 46.5a14.9 14.9 0 1 0-25.6 0A21.7 21.7 0 0 0 26.3 64v3.3c0 2.3 1.9 4.2 4.2 4.2h34.8c2.3 0 4.2-1.9 4.2-4.2V64c0-6.9-3.3-13.3-8.8-17.4zM48 26.4a12.6 12.6 0 0 1 10.3 19.8A12.6 12.6 0 1 1 48 26.4zm19.2 40.8c0 1-.8 1.8-1.8 1.8H30.6c-1 0-1.9-.8-1.9-1.8v-3.3c0-6.1 3-11.8 7.8-15.5a15 15 0 0 0 11.4 5.4c4.5 0 8.6-2 11.5-5.4A19 19 0 0 1 67 64v3.3z"/>
</g>
<g class="contact-button" transform="translate(240)">
<title>Contact Settings</title>
<circle class="Oval-2-Copy-10" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M56.5 71.5L40 58.2h-9.4c-3 0-5.4-2.4-5.4-5.4v-23c0-3 2.4-5.3 5.4-5.3h34.1c3 0 5.4 2.4 5.4 5.3v23c0 3-2.4 5.4-5.3 5.4h-8.2v13.3zm-26.7-45c-2 .2-3 2.2-3 3.1v23.2c0 2.1 1 3.3 3 3.6h10.7l14.9 12.4V56.4H65c.8 0 3 .4 3-2.8 0-3.2.3-22 0-24-.2-2 0-3-3-3s-33.1-.2-35.2 0z"/>
</g>
</g>
<g class="faq-menu" transform="translate(18 229)">
<g class="writing-button" transform="translate(0 120)">
<title>Writing FAQs</title>
<circle class="Oval-2-Copy-7" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M69.2 26.8a8.6 8.6 0 0 0-12.1 0L29.1 55h-.2v.2l-.1.2v.1l-.1.2L24.4 70c-.1.4 0 1 .4 1.4.3.2.6.4 1 .4h.4l14.3-4.3h.2l.2-.2h.1l.1-.1h.1l28-28.2a8.6 8.6 0 0 0 0-12.2zM27.9 68.1l2.8-9.6 6.7 6.7-9.5 3zm12.2-4L32 55.8l24-24 8 8.2-24 24zm27-27.2l-1 1-8.1-8 1-1a5.7 5.7 0 0 1 8.1 0 5.6 5.6 0 0 1 0 8z"/>
</g>
<g class="reading-button" transform="translate(24)">
<title>Reading FAQs</title>
<circle class="Oval-2-Copy-7" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M71.6 70.7h-2.9V37.9h-9v-9.6H27.5v42.4h-2.9V25.4h38V35h9z"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M69.4 36.9l-8.9-9.5 2.1-2 9 9.6zm-34.1 4.6h12.1v2.9H35.3zm0 11.7h25.5v3H35.3zm0 7.2h25.5v2.9H35.3z"/>
</g>
<g class="general-button" transform="translate(24 240)">
<title>General FAQs</title>
<circle class="Oval-2-Copy-7" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M54.3 68h-4V40.5a2 2 0 0 0-2-2h-6a2 2 0 1 0 0 4h4V68h-4a2 2 0 1 0 0 4h12a2 2 0 1 0 0-4zm-7.8-36a3.8 3.8 0 1 0 0-7.6 3.8 3.8 0 0 0 0 7.6z"/>
</g>
</g>
</g>
<g class="middle-layer" transform="translate(132 132)">
<circle class="middle-circle-backgroud" cx="264" cy="264" r="264" fill="#000" fill-opacity=".4"/>
<g class="button-group">
<g class="settings-button" transform="translate(216 408)">
<title>Settings Menu</title>
<circle class="Oval-2-Copy-3" cx="48" cy="48" r="48" fill="#F06" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M49.4 30.5a6.2 6.2 0 0 1 0 12.2v24.6a1.4 1.4 0 0 1-2.8 0V42.7a6.2 6.2 0 0 1 0-12.2V29a1.4 1.4 0 0 1 2.8 0v1.6zm-4.8 6.1a3.4 3.4 0 1 0 6.8 0 3.4 3.4 0 0 0-6.8 0zm-12.4 17a6.2 6.2 0 0 1 0 12.1v1.6a1.4 1.4 0 0 1-3 0v-1.6a6.2 6.2 0 0 1 0-12.1V28.9a1.4 1.4 0 0 1 3 0v24.7zm-4.8 6a3.4 3.4 0 1 0 6.7 0 3.4 3.4 0 0 0-6.7 0zM66.7 45a6.2 6.2 0 0 1 0 12v10.3a1.4 1.4 0 0 1-2.9 0V57.1a6.2 6.2 0 0 1 0-12.2V29a1.4 1.4 0 0 1 3 0v16zM62 51a3.4 3.4 0 1 0 6.7 0 3.4 3.4 0 0 0-6.7 0z"/>
</g>
<g class="faq-button" transform="translate(24 217)">
<title>FAQ Menu</title>
<circle class="Oval-2-Copy" cx="48" cy="48" r="48" fill="#F06" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" stroke="#fff" d="M36.5 38.8c.6 0 1.2-.5 1.2-1.2a11 11 0 0 1 11.8-11 11 11 0 0 1 10 11.3c-.1 5.2-3.8 9.7-8.9 10.5a3.4 3.4 0 0 0-2.6 3.4v6a1.2 1.2 0 0 0 2.4 0v-6c0-1 .5-1 .7-1a13 13 0 0 0 10.8-12.9 13.3 13.3 0 1 0-26.6-.3c0 .7.5 1.2 1.2 1.2z"/>
<g class="Shape" fill-rule="nonzero">
<use fill="#fff" fill-rule="evenodd" xlink:href="#path-1"/>
<path stroke="#fff" d="M45.6 67.9a3.6 3.6 0 1 0 7.3 0c0-2-1.7-3.7-3.7-3.7s-3.6 1.6-3.6 3.7zm5.9 0c0 1.2-1 2.2-2.3 2.2-1.3 0-2.3-1-2.3-2.2 0-1.3 1-2.3 2.3-2.3 1.3 0 2.3 1 2.3 2.3z"/>
</g>
</g>
<g class="home-button" transform="translate(216 24)">
<title>Home Menu</title>
<circle class="Oval-2-Copy-2" cx="48" cy="48" r="48" fill="#F06" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M64.2 46.8c-.7 0-1.3.6-1.3 1.3v20.7h-7.3v-8a7.1 7.1 0 0 0-14.3 0v8H34V48.1a1.3 1.3 0 0 0-2.7 0v22c0 .8.6 1.4 1.4 1.4h10c.7 0 1.3-.6 1.3-1.3v-9.3a4.5 4.5 0 0 1 9 0v9.3c0 .7.5 1.3 1.2 1.3h10c.7 0 1.3-.6 1.3-1.3v-22c0-.8-.6-1.4-1.3-1.4zm6-1.2L49.3 25c-.5-.5-1.4-.5-2 0L26.8 45.6a1.3 1.3 0 1 0 2 2l19.7-19.9 19.9 19.8a1.3 1.3 0 1 0 1.8-1.9z"/>
</g>
<g class="more-button" transform="translate(408 217)">
<title>More Menu</title>
<circle class="Oval-2" cx="48" cy="48" r="48" fill="#F06" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M29.8 42a5.9 5.9 0 0 0-5.8 5.8c0 3.2 2.6 5.9 5.8 5.9 3.2 0 5.9-2.7 5.9-5.9S33 42 29.8 42zM48 42a5.9 5.9 0 0 0-5.8 5.8c0 3.2 2.6 5.9 5.8 5.9A5.9 5.9 0 1 0 48 42zm18.2 0a5.9 5.9 0 0 0-5.9 5.8c0 3.2 2.7 5.9 5.9 5.9S72 51 72 47.8 69.4 42 66.2 42zm-36.4 2.6c1.8 0 3.3 1.4 3.3 3.2 0 1.8-1.5 3.3-3.3 3.3a3.2 3.2 0 0 1-3.2-3.3c0-1.8 1.4-3.2 3.2-3.2zm18.2 0c1.8 0 3.2 1.4 3.2 3.2 0 1.8-1.4 3.3-3.2 3.3a3.2 3.2 0 0 1-3.2-3.3c0-1.8 1.4-3.2 3.2-3.2zm18.2 0c1.8 0 3.2 1.4 3.2 3.2 0 1.8-1.4 3.3-3.2 3.3a3.2 3.2 0 0 1-3.3-3.3c0-1.8 1.5-3.2 3.3-3.2z"/>
</g>
</g>
</g>
<g class="main-menu" transform="translate(276 276)">
<title>Main Menu</title>
<circle class="inner-circle-background" cx="120" cy="120" r="120" fill="#000" opacity=".4"/>
<g class="menu-button" fill="#fff" fill-rule="nonzero" transform="translate(84 95)">
{{--<path class="Shape" d="M4.7 29.3a3.7 3.7 0 1 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.7zM4.4 8a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 0 1 0 7.3H4.4zm0 42a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.4z"/>--}}
<path class="Shape" d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
</g>
</g>
</g>
</g>
</svg>
I'm completely newbie to use svg, is there any way that I can use my custom icon with custom size just using path element?
Next I'm using your original path element instead of the icon already there. You can use any icon you want and of any size if you put it inside a <symbol> element.
How did I do it: the <symbol> element has a viewBox="0 -11 72 72" Please note that the symbol is a square pf 72/72 units.
When you use a symbol you can give the <use> element a x and a y attributes to position the icon where you need. You also can give the <use> element a width and a height attributes to size it to your needs.
In order to get the value for the <symbol> element you may use the .getBBox() method for the content of the symbol. In this case I did: Shape.getBBox(). I hope it helps.
<use xlink:href="#test" x="28" y="28" width="40" height="40" fill="white" />
<svg class="menu" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 792 792">
<defs>
<symbol id="test" viewBox="0 -11 72 72">
<path id="Shape" d="M4.7 29.3a3.7 3.7 0 1 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.7zM4.4 8a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 0 1 0 7.3H4.4zm0 42a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.4z"/>
</symbol>
</defs>
<g class="All-on" fill="none" fill-rule="evenodd" transform="translate(-571 -143)">
<g class="menu" transform="translate(571 143)">
<g class="outside-layer">
<circle class="outer-cirlce-background" cx="396" cy="396" r="396" fill="#000" fill-opacity=".4"/>
<g class="more-menu" transform="translate(654 229)">
<g class="writing-button" transform="translate(24 120)">
<title>My Posts</title>
<circle class="Oval-2-Copy-11" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<use xlink:href="#test" x="28" y="28" width="40" height="40" fill="white" />
</g>
</g>
</g>
</g>
</g>
</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==">