SVG Alignment

[sofos]

Hi everyone,

I've got the following SVG:

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="502.000000pt" height="148.000000pt" viewBox="0 0 502.000000 148.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,148.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M352 1350 c-59 -27 -144 -110 -175 -173 -45 -88 -62 -264 -32 -317 8
-14 15 -23 15 -20 1 3 3 33 4 66 6 122 57 262 126 349 62 78 108 92 158 50 80
-67 69 -311 -34 -728 -21 -81 -34 -150 -30 -154 4 -4 27 0 52 9 24 8 44 13 44
9 0 -3 -12 -24 -25 -46 -25 -41 -32 -69 -16 -63 5 2 45 56 88 120 104 157 308
418 435 559 165 182 328 301 432 315 49 7 57 17 27 34 -48 25 -150 -4 -246
-70 -128 -88 -313 -295 -492 -549 -53 -75 -99 -140 -103 -144 -4 -5 1 27 11
70 32 133 52 309 46 413 -9 153 -45 238 -118 275 -39 21 -116 18 -167 -5z"/>
<path d="M4062 1333 c-46 -59 -230 -342 -331 -511 -100 -165 -191 -344 -191
-374 0 -40 23 -12 76 95 92 183 313 538 450 723 67 92 73 104 46 104 -12 0
-33 -16 -50 -37z"/>
<path d="M3523 1214 c-21 -22 -83 -108 -137 -190 l-100 -150 -122 -12 c-235
-24 -385 -87 -434 -182 -33 -65 -22 -126 28 -167 26 -21 34 -15 16 12 -42 65
58 144 240 190 50 12 114 26 143 30 l52 7 -79 -136 c-129 -220 -180 -330 -161
-349 6 -6 35 40 75 119 36 71 99 183 139 249 l73 120 75 6 c103 9 242 -5 290
-29 47 -23 52 -9 14 36 -32 38 -105 69 -197 83 -121 19 -123 2 18 203 88 125
122 182 115 189 -7 7 -22 -1 -48 -29z"/>
<path d="M4535 1147 c-60 -28 -139 -112 -195 -206 -31 -52 -48 -70 -76 -80
-44 -16 -60 -51 -41 -91 11 -21 12 -33 3 -53 -18 -42 -182 -171 -251 -197 -38
-15 -58 3 -49 44 12 59 57 159 91 202 18 24 33 49 33 54 0 14 -51 12 -76 -3
-34 -19 -214 -192 -214 -205 0 -18 11 -14 44 16 l29 27 -21 -31 c-12 -17 -24
-49 -28 -72 -5 -35 -3 -44 19 -66 58 -58 177 -22 315 94 40 33 72 57 72 53 0
-5 -7 -33 -15 -63 -27 -100 -15 -193 30 -230 17 -14 18 -13 10 15 -14 46 -9
97 15 172 26 79 105 236 132 259 20 19 125 25 171 10 21 -6 27 -5 27 7 0 22
-45 55 -91 67 -22 6 -39 15 -39 20 0 4 34 44 75 88 81 86 139 122 197 122 38
0 88 -32 88 -55 0 -8 5 -17 10 -20 6 -4 10 5 10 19 0 36 -63 103 -108 116 -59
16 -113 12 -167 -13z"/>
<path d="M1818 1134 c-32 -17 -105 -121 -172 -246 -46 -86 -47 -87 -66 -68
-26 26 -61 34 -130 27 -87 -8 -162 -52 -266 -159 -93 -95 -150 -139 -211 -165
-34 -14 -38 -13 -49 2 -22 30 28 167 90 248 20 26 36 49 36 52 0 12 -68 3 -91
-13 -40 -26 -209 -190 -209 -202 0 -17 12 -12 43 18 l29 27 -21 -35 c-28 -46
-28 -113 -1 -140 15 -15 33 -20 71 -20 61 0 135 36 228 111 l61 49 0 -58 c0
-37 6 -66 16 -81 19 -27 71 -51 112 -51 46 0 128 48 181 106 48 52 49 53 40
22 -5 -18 -9 -65 -9 -104 0 -56 4 -77 19 -95 25 -32 33 -22 19 24 -30 97 84
330 281 575 44 53 93 110 110 126 17 17 31 33 31 37 0 10 -58 29 -89 29 -14
-1 -38 -7 -53 -16z m-271 -322 c22 -14 8 -129 -21 -172 -25 -38 -113 -118
-153 -139 -59 -31 -101 1 -88 67 18 97 108 200 210 239 37 14 37 14 52 5z"/>
<path d="M1074 975 c-19 -19 -24 -34 -22 -58 3 -28 7 -32 34 -35 52 -5 105 73
72 106 -20 20 -57 14 -84 -13z"/>
<path d="M4083 978 c-44 -49 -37 -98 14 -98 29 0 83 50 83 77 0 46 -62 59 -97
21z"/>
<path d="M4796 970 c-28 -34 -33 -59 -14 -78 36 -36 112 14 106 71 -3 28 -7
32 -34 35 -25 2 -37 -3 -58 -28z"/>
<path d="M2413 846 c-55 -18 -91 -44 -198 -146 -185 -176 -326 -248 -380 -193
-47 47 19 191 119 260 76 52 155 39 128 -22 -15 -33 -106 -83 -164 -91 -27 -4
-48 -11 -48 -17 0 -6 19 -8 49 -4 154 18 262 135 184 197 -25 19 -37 22 -103
18 -167 -10 -310 -140 -310 -282 0 -41 5 -53 33 -80 42 -43 99 -52 182 -31 71
19 124 49 203 114 l58 48 -4 -61 c-3 -50 0 -66 16 -86 17 -21 28 -24 73 -23
30 0 79 10 109 21 30 11 81 25 113 32 39 8 81 27 131 61 80 53 100 72 94 90
-2 6 -26 -8 -53 -31 -49 -41 -100 -71 -153 -91 -22 -9 -20 -4 16 27 93 79 133
211 80 262 -46 42 -100 51 -175 28z m135 -72 c15 -10 22 -25 22 -47 -1 -38
-24 -85 -34 -68 -11 17 -68 13 -98 -7 -45 -30 -73 -73 -73 -114 0 -35 -2 -38
-33 -44 -18 -4 -44 -2 -58 5 -49 22 -21 121 58 207 69 76 163 105 216 68z"/>
<path d="M4623 761 c-43 -38 -93 -85 -112 -104 -39 -42 -39 -69 1 -38 l26 21
-19 -37 c-26 -52 -24 -89 7 -120 23 -23 32 -25 83 -21 67 5 146 48 253 141 87
74 79 96 -9 23 -78 -65 -175 -119 -197 -110 -9 3 -16 17 -16 31 0 38 48 151
91 215 22 32 39 60 39 63 0 3 -16 5 -35 5 -29 0 -48 -12 -112 -69z"/>
<path d="M3825 213 c-4 -31 -9 -62 -12 -70 -3 -7 -1 -13 5 -13 5 0 14 21 18
47 l9 47 25 -47 c14 -26 28 -47 32 -47 4 0 17 18 28 40 24 47 40 44 40 -6 0
-24 4 -34 16 -34 13 0 14 9 9 58 -11 89 -19 94 -51 34 -16 -28 -32 -52 -36
-52 -4 0 -19 23 -33 50 -14 28 -29 50 -34 50 -5 0 -12 -25 -16 -57z"/>
<path d="M4045 200 c-19 -38 -31 -70 -25 -70 5 0 14 9 20 20 7 13 21 20 41 20
22 0 32 -5 36 -20 3 -11 13 -20 23 -20 15 0 12 10 -16 70 -19 39 -36 70 -39
70 -3 0 -21 -31 -40 -70z m49 4 c9 -23 8 -24 -14 -24 -11 0 -20 2 -20 4 0 12
13 36 20 36 4 0 11 -7 14 -16z"/>
<path d="M4203 260 c-45 -18 -54 -78 -17 -114 21 -22 100 -22 108 0 10 25 7
34 -9 34 -8 0 -15 -9 -15 -20 0 -30 -45 -27 -66 5 -32 48 10 110 57 84 17 -9
20 -8 17 3 -5 16 -45 20 -75 8z"/>
<path d="M4342 205 c-35 -72 -36 -75 -23 -75 5 0 13 9 16 20 5 15 15 20 40 20
25 0 35 -5 40 -20 6 -18 15 -20 81 -20 41 0 74 3 74 8 0 4 -19 6 -41 4 -47 -5
-47 -6 8 69 18 26 33 49 33 53 0 10 -98 7 -105 -3 -3 -6 10 -11 30 -13 l35 -3
-35 -50 c-20 -27 -39 -51 -43 -53 -4 -1 -20 27 -36 63 -15 36 -31 65 -35 65
-4 0 -21 -29 -39 -65z m48 -12 c0 -7 -7 -13 -15 -13 -16 0 -19 9 -9 35 5 13 8
14 15 3 5 -7 9 -19 9 -25z"/>
<path d="M4590 200 c0 -56 3 -70 15 -70 12 0 15 14 15 70 0 56 -3 70 -15 70
-12 0 -15 -14 -15 -70z"/>
<path d="M4760 218 l0 -52 -48 47 c-26 26 -50 47 -52 47 -3 0 -5 -29 -5 -65 0
-36 3 -65 8 -65 4 0 7 21 7 47 l0 47 50 -49 50 -49 0 49 c0 28 3 60 6 73 4 13
2 22 -5 22 -7 0 -11 -20 -11 -52z"/>
<path d="M4810 200 l0 -70 40 0 c22 0 40 4 40 9 0 4 -11 6 -25 3 -22 -4 -25
-1 -25 22 0 19 5 26 20 26 11 0 20 5 20 10 0 6 -9 10 -20 10 -13 0 -20 7 -20
20 0 13 7 20 19 20 11 0 23 5 26 10 4 6 -10 10 -34 10 l-41 0 0 -70z"/>
</g>
</svg>

How can I align it to be centered in my webpage?

If you see the above image it is on left...I want to put it center.

How can I do it?

Thanks in advance!

[Nathan Explosion]

Give the SVG element a class

<svg class="mysvg".....

And then use css...

.mysvg {
  margin-left:auto;
  margin-right:auto;
  display:block;
}

 

[sofos]

18 hours ago, Nathan Explosion said:

Give the SVG element a class

<svg class="mysvg".....

And then use css...

.mysvg {
  margin-left:auto;
  margin-right:auto;
  display:block;
}

 

In this case how should look the whole code?

Thanks for the help!

[The Old Man]

16 minutes ago, sofos said:

class="mysvg"

Just add that to your code above in your first post. Then add the CSS to your custom.css file.

[sofos]

5 minutes ago, The Old Man said:

Just add that to your code above in your first post. Then add the CSS to your custom.css file.

Ok solved really thanks guys!

[sofos]

Last thing for SVG.

With the following SVG:

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="718.000000pt" height="184.000000pt" viewBox="0 0 718.000000 184.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,184.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M413 1655 c-116 -59 -202 -168 -228 -291 -18 -84 -19 -202 -3 -241
11 -26 12 -21 19 55 10 104 30 175 80 274 124 247 281 243 302 -8 10 -117 -33
-391 -107 -681 -32 -126 -33 -133 -15 -133 11 0 36 7 56 15 19 8 39 15 44 15
4 0 -8 -27 -28 -61 -24 -40 -33 -63 -26 -70 7 -7 24 13 51 59 183 308 644 845
827 964 75 48 170 88 210 88 33 0 32 18 -2 31 -54 20 -153 -9 -253 -76 -166
-111 -375 -346 -614 -695 -32 -47 -62 -89 -66 -93 -4 -4 4 39 17 95 85 375 65
655 -54 745 -53 41 -140 44 -210 8z"/>
<path d="M4506 1593 c-191 -260 -525 -827 -542 -920 -12 -63 14 -33 69 80 98
198 378 647 526 842 28 37 51 72 51 76 0 5 -9 9 -20 9 -14 0 -41 -28 -84 -87z"/>
<path d="M3902 1462 c-31 -42 -95 -137 -142 -209 l-85 -132 -45 0 c-134 -2
-330 -41 -425 -85 -60 -27 -129 -86 -151 -127 -32 -64 -1 -178 51 -188 19 -3
19 -2 3 16 -26 29 -22 58 15 99 35 41 134 91 232 117 66 18 235 47 235 40 0
-2 -36 -64 -79 -137 -105 -176 -180 -325 -188 -370 -3 -20 -3 -36 0 -36 3 0
35 57 72 128 36 70 105 192 153 271 104 172 93 166 292 158 141 -6 199 -17
225 -44 22 -22 29 -10 13 23 -26 56 -140 106 -281 124 -38 4 -70 10 -73 12 -4
5 124 194 217 321 32 44 59 84 59 89 0 4 -9 8 -20 8 -13 0 -39 -26 -78 -78z"/>
<path d="M5108 1445 c-92 -23 -176 -101 -258 -239 -32 -54 -53 -78 -74 -86
-62 -22 -81 -65 -55 -123 17 -37 -4 -66 -103 -146 -113 -90 -170 -123 -205
-119 -26 3 -28 6 -26 49 1 56 64 197 111 250 17 20 29 39 25 43 -13 12 -59 6
-90 -14 -47 -28 -239 -217 -230 -226 4 -4 17 2 30 13 40 36 51 37 27 4 -13
-20 -25 -53 -28 -82 -4 -41 -1 -51 21 -73 61 -61 203 -13 357 118 41 35 76 63
77 62 1 -1 -7 -31 -18 -66 -36 -113 -24 -229 27 -271 16 -13 17 -12 8 6 -16
34 -9 127 16 200 25 77 54 138 108 232 31 55 40 63 78 72 55 14 103 14 143 0
47 -17 51 -2 9 36 -25 23 -50 36 -82 40 l-46 7 19 27 c46 64 148 165 195 192
68 39 132 40 175 3 17 -14 31 -32 31 -40 0 -8 5 -14 10 -14 13 0 13 3 -6 49
-31 77 -145 122 -246 96z"/>
<path d="M2040 1414 c-14 -10 -31 -25 -38 -34 -30 -35 -108 -160 -154 -247
l-49 -92 -24 27 c-22 25 -28 27 -107 27 -77 0 -90 -3 -161 -38 -62 -31 -90
-53 -153 -122 -87 -96 -161 -155 -236 -190 -61 -28 -78 -24 -78 21 0 62 88
253 129 278 6 4 11 14 11 22 0 24 -53 16 -101 -15 -56 -38 -225 -208 -216
-217 4 -4 20 5 35 19 39 38 46 34 17 -9 -36 -53 -35 -125 1 -153 59 -47 172
-15 303 85 35 27 72 55 81 61 15 12 16 8 13 -45 -4 -67 9 -97 56 -129 73 -49
167 -20 275 85 38 37 65 58 61 47 -4 -11 -10 -60 -12 -110 -4 -79 -2 -94 17
-124 25 -40 37 -35 21 10 -16 47 -14 72 15 157 52 157 134 294 294 492 43 52
96 114 118 137 35 36 39 43 26 54 -26 21 -115 23 -144 3z m-296 -350 c18 -7
21 -36 5 -65 -7 -15 -7 -24 0 -33 29 -34 -103 -202 -196 -249 -94 -49 -136 20
-85 136 28 63 122 160 185 192 54 26 65 29 91 19z"/>
<path d="M2703 1096 c-57 -18 -91 -44 -213 -159 -169 -160 -292 -237 -377
-237 -50 0 -73 25 -73 80 1 101 153 270 244 270 41 0 56 -11 56 -40 0 -52
-122 -130 -202 -130 -15 0 -30 -4 -33 -10 -9 -15 54 -12 111 5 149 44 224 163
132 211 -50 26 -167 15 -242 -22 -124 -61 -200 -163 -200 -271 -1 -55 2 -65
28 -92 42 -44 115 -57 196 -37 82 21 131 47 227 122 81 64 82 64 72 32 -16
-58 -11 -105 15 -135 22 -25 30 -28 83 -27 36 1 82 11 123 27 36 14 84 27 108
30 24 3 67 17 96 32 88 45 194 135 158 135 -4 0 -31 -20 -61 -44 -51 -42 -129
-86 -181 -101 -18 -5 -13 2 21 28 127 98 170 258 87 320 -34 25 -118 32 -175
13z m151 -77 c29 -23 33 -55 15 -108 -11 -32 -23 -39 -34 -21 -9 15 -62 12
-94 -5 -60 -31 -105 -110 -83 -145 9 -14 6 -20 -14 -29 -36 -16 -90 -13 -109
6 -13 12 -16 28 -13 58 19 162 234 321 332 244z"/>
<path d="M5228 1057 c-42 -25 -228 -203 -228 -217 0 -17 13 -11 48 23 l35 32
-27 -46 c-84 -147 22 -229 190 -144 78 39 244 169 244 192 0 10 -9 7 -32 -12
-131 -107 -235 -169 -264 -158 -42 16 17 199 95 297 17 21 31 43 31 47 0 17
-55 9 -92 -14z"/>
<path d="M5076 443 c-3 -16 -12 -80 -21 -143 -9 -63 -18 -123 -21 -132 -4 -13
0 -18 14 -18 17 0 20 10 26 88 4 48 11 103 14 122 l8 34 20 -34 c12 -19 42
-74 68 -123 26 -48 51 -85 56 -82 5 3 34 54 65 113 31 59 60 111 65 115 7 8
35 -176 32 -215 0 -13 7 -18 28 -18 27 0 28 2 20 29 -4 15 -16 87 -25 160 -11
80 -22 131 -29 131 -6 0 -42 -59 -80 -131 l-68 -131 -25 43 c-13 24 -45 83
-70 131 -47 91 -68 108 -77 61z"/>
<path d="M5537 275 c-31 -63 -57 -117 -57 -120 0 -3 6 -5 13 -5 8 0 21 17 29
39 15 38 16 38 72 40 l58 1 15 -40 c12 -30 22 -40 39 -40 21 0 20 5 -34 120
-31 66 -61 120 -67 120 -6 0 -36 -52 -68 -115z"/>
<path d="M5789 351 c-31 -31 -39 -46 -39 -75 0 -49 23 -92 60 -111 33 -17 122
-20 151 -5 27 15 27 76 0 83 -17 4 -20 -1 -23 -37 -3 -40 -4 -41 -41 -44 -30
-3 -43 2 -66 26 -88 87 -8 232 99 179 28 -15 31 -15 26 -1 -3 9 -6 18 -6 20 0
2 -28 4 -61 4 -58 0 -64 -2 -100 -39z"/>
<path d="M6067 275 c-31 -63 -57 -117 -57 -120 0 -3 6 -5 13 -5 8 0 21 18 30
40 l15 40 57 0 57 0 15 -40 16 -40 129 0 c96 0 128 3 128 13 0 9 -19 11 -70 9
-38 -2 -70 -1 -70 2 0 3 34 53 75 111 l75 105 -94 0 c-67 0 -95 -4 -99 -13 -4
-10 11 -12 65 -9 l70 4 -77 -106 c-42 -58 -80 -106 -84 -106 -5 0 -32 52 -61
115 -30 63 -59 115 -65 115 -5 0 -36 -52 -68 -115z"/>
<path d="M6635 270 c0 -87 3 -120 12 -120 8 0 13 26 15 81 l3 81 88 -82 c48
-45 87 -80 87 -78 0 1 1 56 3 121 1 88 -1 117 -10 117 -10 0 -13 -24 -13 -87
l0 -88 -88 88 c-48 48 -90 87 -92 87 -3 0 -5 -54 -5 -120z"/>
</g>
</svg>

How can I make it responsive for the Mobile view?

Thanks in advance!

[Joy Rex]

A Google search for "responsive SVG" yields many results... sometimes the answer is a search away!

https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/