Search code examples
htmlcsssvgcss-selectorshtml5-canvas

Why do I see a margin on the svg?

I am trying to add my logo to the header of my webpage but I keep seeing this margin around the svg when i check for the appearance on smaller screens.

Here is my html file

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Restaurant</title>
</head>
<body>
    <header>
        <div id="logo">
            <img src="img/logo.svg" alt="">
            <p>RESTAURANT</p>
        </div>
    </header>
</body>
</html>type here

Here is my style.css file

*{
    margin: 0;
    padding: 0;
    /* border: 1px solid red; */
}

body{
    background-color: black;
    color: white;
}


#logo img{
    background: white;
    
}


#logo p{
    font-size: 16.2;
    font-family: sans-serif;
    font-weight: bold;
    margin-left: 35px;
    letter-spacing: 0.2px;
}

Here is logo.svg This file contains the logo that I want to include in my header

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="241.000000pt" height="70.000000pt" viewBox="0 0 241.000000 70.000000"
 preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,70.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M0 350 l0 -350 1205 0 1205 0 0 350 0 350 -1205 0 -1205 0 0 -350z
m374 73 c2 -10 12 -54 21 -98 34 -159 44 -167 63 -55 19 108 34 144 59 148 13
2 25 -4 31 -15 13 -24 82 -305 82 -332 0 -21 -53 -57 -69 -47 -4 3 -11 58 -14
122 -3 64 -10 121 -16 127 -8 8 -11 1 -11 -25 0 -36 -12 -107 -31 -180 -19
-75 -82 -72 -94 4 -17 121 -29 178 -35 178 -4 0 -11 -45 -15 -100 -5 -71 -12
-106 -24 -121 l-16 -21 -19 21 c-18 20 -18 23 3 128 12 59 25 142 28 183 3 41
10 81 16 88 14 17 35 15 41 -5z m534 -147 c34 -32 37 -39 35 -85 -2 -79 -29
-123 -89 -142 -98 -33 -118 -33 -153 0 -42 39 -42 82 0 145 18 26 43 55 56 63
22 15 27 15 59 -1 29 -13 34 -20 29 -39 -11 -36 -22 -40 -29 -13 -9 35 -31 33
-72 -8 -38 -38 -43 -69 -18 -105 36 -51 163 1 183 75 14 49 0 79 -49 104 -22
11 -38 25 -35 30 12 19 46 9 83 -24z m262 -5 c0 -38 -30 -91 -52 -91 -20 0
-78 -33 -78 -44 1 -19 48 -66 68 -66 21 0 42 18 42 38 0 10 -8 12 -30 7 -24
-5 -29 -4 -24 9 9 24 41 29 69 10 31 -20 32 -34 0 -68 -31 -33 -43 -33 -93 4
-23 16 -44 30 -47 30 -3 0 -5 -16 -5 -36 0 -24 -4 -34 -12 -31 -7 2 -12 13
-11 23 1 10 7 68 12 127 6 59 13 112 16 117 4 6 37 10 76 10 l69 0 0 -39z
m199 30 c20 -13 4 -31 -26 -31 -26 0 -63 -25 -63 -42 0 -5 21 -18 48 -29 104
-45 109 -51 91 -108 -23 -71 -59 -87 -122 -55 -38 20 -47 31 -47 61 0 25 3 27
43 37 27 7 28 6 21 -29 -5 -30 -4 -35 13 -35 27 0 43 19 43 51 0 22 -9 31 -57
55 -46 23 -59 34 -61 55 -4 34 35 65 98 78 3 0 11 -3 19 -8z m359 -81 c13 -47
33 -107 43 -134 10 -26 16 -52 13 -57 -9 -15 -32 -10 -42 8 -9 14 -15 15 -55
3 -53 -14 -108 -7 -130 18 -26 29 -36 85 -22 120 18 41 79 62 131 43 38 -14
55 -8 36 11 -7 7 -12 20 -12 29 0 28 -36 32 -111 14 -51 -13 -74 -14 -81 -7
-8 8 -5 14 13 20 45 17 64 20 128 19 l65 -2 24 -85z"/>
<path d="M1598 194 c-22 -11 -28 -22 -28 -49 0 -38 41 -95 69 -95 30 0 86 44
83 66 -8 54 -14 65 -48 79 -44 18 -42 18 -76 -1z"/>
</g>
</svg>

It looks fine on the big screen But on smaller screens there is this margin around the svg I tried to crop the svg but that didn't work Almost every other solution i could think of failed

Solution

  • All you need to do is changing viewBox="0 0 241.000000 27.000000" and the transform="translate(0.000000,27.000000)" part on your svg code, it was just an extra space so decreasing the size as above mentioned will fix that problem

    I have edited your svg code, just replace it with this code right below:

     <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="241.000000pt" height="70.000000pt" viewBox="0 0 241.000000 27.000000"
 preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,27.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M0 350 l0 -350 1205 0 1205 0 0 350 0 350 -1205 0 -1205 0 0 -350z
m374 73 c2 -10 12 -54 21 -98 34 -159 44 -167 63 -55 19 108 34 144 59 148 13
2 25 -4 31 -15 13 -24 82 -305 82 -332 0 -21 -53 -57 -69 -47 -4 3 -11 58 -14
122 -3 64 -10 121 -16 127 -8 8 -11 1 -11 -25 0 -36 -12 -107 -31 -180 -19
-75 -82 -72 -94 4 -17 121 -29 178 -35 178 -4 0 -11 -45 -15 -100 -5 -71 -12
-106 -24 -121 l-16 -21 -19 21 c-18 20 -18 23 3 128 12 59 25 142 28 183 3 41
10 81 16 88 14 17 35 15 41 -5z m534 -147 c34 -32 37 -39 35 -85 -2 -79 -29
-123 -89 -142 -98 -33 -118 -33 -153 0 -42 39 -42 82 0 145 18 26 43 55 56 63
22 15 27 15 59 -1 29 -13 34 -20 29 -39 -11 -36 -22 -40 -29 -13 -9 35 -31 33
-72 -8 -38 -38 -43 -69 -18 -105 36 -51 163 1 183 75 14 49 0 79 -49 104 -22
11 -38 25 -35 30 12 19 46 9 83 -24z m262 -5 c0 -38 -30 -91 -52 -91 -20 0
-78 -33 -78 -44 1 -19 48 -66 68 -66 21 0 42 18 42 38 0 10 -8 12 -30 7 -24
-5 -29 -4 -24 9 9 24 41 29 69 10 31 -20 32 -34 0 -68 -31 -33 -43 -33 -93 4
-23 16 -44 30 -47 30 -3 0 -5 -16 -5 -36 0 -24 -4 -34 -12 -31 -7 2 -12 13
-11 23 1 10 7 68 12 127 6 59 13 112 16 117 4 6 37 10 76 10 l69 0 0 -39z
m199 30 c20 -13 4 -31 -26 -31 -26 0 -63 -25 -63 -42 0 -5 21 -18 48 -29 104
-45 109 -51 91 -108 -23 -71 -59 -87 -122 -55 -38 20 -47 31 -47 61 0 25 3 27
43 37 27 7 28 6 21 -29 -5 -30 -4 -35 13 -35 27 0 43 19 43 51 0 22 -9 31 -57
55 -46 23 -59 34 -61 55 -4 34 35 65 98 78 3 0 11 -3 19 -8z m359 -81 c13 -47
33 -107 43 -134 10 -26 16 -52 13 -57 -9 -15 -32 -10 -42 8 -9 14 -15 15 -55
3 -53 -14 -108 -7 -130 18 -26 29 -36 85 -22 120 18 41 79 62 131 43 38 -14
55 -8 36 11 -7 7 -12 20 -12 29 0 28 -36 32 -111 14 -51 -13 -74 -14 -81 -7
-8 8 -5 14 13 20 45 17 64 20 128 19 l65 -2 24 -85z"/>
<path d="M1598 194 c-22 -11 -28 -22 -28 -49 0 -38 41 -95 69 -95 30 0 86 44
83 66 -8 54 -14 65 -48 79 -44 18 -42 18 -76 -1z"/>
</g>
</svg>