简体   繁体   中英

Using SVG code, how can I add white space to the top of my SVG image?

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==">

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM