SVG logos in Illustrator

#1

Hi

So I have created a hamburger, in Illustrator, which is described in this youtube video: https://www.youtube.com/watch?v=cWh0de8IhX4

Now, when I insert this image in Visual Studio , and give it a box-shadow, the shadow will show up outside of the square which has whitespace outside of the hamburger. But I want the shadow to be outside of the hamburger’s edges/borders.
But I don’t know how to export an SVG which makes that whitespace, behind the hamburger, transparent and non existent? How can I eliminate all whitespace behind the edges of this hamburger?

All help with how to do this in Illustrator is much appreciated. Or if it is possible to make in Visual Studio.

#2

An easier way would be to export the vector for web as PNG file. When you export, you have the option to keep or remove the whitespace.

#3

Applying box shadow to the the SVG element itself will apply it that element. To apply it to the element/s you want, apply box shadow to those elements. It’s exactly the same as HTML.

<svg viewBox="0 0 64 64">
  <rect x="2" y="2" width="60" height="8" rx="4">
<svg>

So if you apply box shadow to the svg element, then you get box shadow on that.

If you apply it to that rect element, then you get box shadow on that.

1 Like
#4

Ok great.

Another thing I wonder about is how the code looks before and after it is run through that editor: https://jakearchibald.github.io/svgomg/ . This makes the images smaller(?) or something?

When I opened the image in Visual Studio before this it looked quite manageable the code. It looks kind of like this and the classes are easy to overview:

<svg class="Lager_1" data-name="Lager 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1016 309">
  <g class="_Bun_bottom_" data-name="&lt;Bun bottom&gt;">
    <path d="M1046,510H288.87A47.87,47.87,0,0,1,241,462.13V384h853v78A48,48,0,0,1,1046,510Z" transform="translate(-159 -201)" style="fill: #f4d540"/>
  </g>
  <g class="_Hamburger_" data-name="&lt;Hamburger&gt;">
    <rect y="128" width="1016" height="55" rx="27.5" style="fill: #3d2d33"/>
  </g>
  <g class="_Kål_" data-name="&lt;Kål&gt;">
    <path d="M1120.15,328h-401a8.47,8.47,0,0,0-4.93,1.63,8.47,8.47,0,0,0-4.93-1.63H543.77a8.47,8.47,0,0,0-4.93,1.63,8.46,8.46,0,0,0-4.92-1.63H203.85c-5.44,0-9.85,5.4-9.85,12.06s4.41,12.06,9.85,12.06h46.31c0,6.66,4.41,12.06,9.85,12.06h92.62a9.06,9.06,0,0,0,7-3.62h50.57c1.25,4.89,5,8.44,9.4,8.44h197c4.41,0,8.14-3.55,9.4-8.44h83.21a8.47,8.47,0,0,0,4.93-1.63,8.47,8.47,0,0,0,4.93,1.63H760c1.26,4.89,5,8.44,9.4,8.44H934.92c4.41,0,8.14-3.55,9.4-8.44h175.83c5.44,0,9.85-5.4,9.85-12.06v-8.44C1130,333.4,1125.59,328,1120.15,328Z" transform="translate(-159 -201)" style="fill: #43ef43"/>
  </g>
  <g class="_Ketchup_" data-name="&lt;Ketchup&gt;">
    <rect x="110" y="137" width="147" height="11" style="fill: #ce1124"/>
    <rect x="328" y="137" width="147" height="11" style="fill: #ce1124"/>
    <rect x="527" y="137" width="147" height="11" style="fill: #ce1124"/>
    <rect x="758" y="137" width="147" height="11" style="fill: #ce1124"/>
  </g>
  <g class="_Ost_" data-name="&lt;Ost&gt;">
    <path d="M1119,321H570v1H222a4,4,0,0,0-4,4v7a4,4,0,0,0,4,4,4,4,0,0,1,4,4,4,4,0,0,0,4,4h11v7a6,6,0,0,0,12,0v-7h6v7a6,6,0,0,0,12,0v-7h33v18a6,6,0,0,0,12,0,6,6,0,0,0,5-2.69V363a6,6,0,0,0,12,0V345h16v9a6,6,0,0,0,12,0v-9h16v12a6,6,0,0,0,12,0V345h6v9a6,6,0,0,0,12,0v-9h27v15a6,6,0,0,0,12,0v-2.81a6,6,0,0,0,9-5.19v-7h24v9a6,6,0,0,0,8,5.65V360a6,6,0,0,0,12,0v-2a6,6,0,0,0,6-6v-7h12v7a6,6,0,0,0,12,0v5a6,6,0,0,0,12,0V345h13v9a6,6,0,0,0,12,0v-9h33v7a6,6,0,0,0,6,6,5.67,5.67,0,0,0,1.38-.17A62.31,62.31,0,0,1,617,360a6,6,0,0,0,6-6v-9h42v18a6,6,0,0,0,12,0V345h61v9a6,6,0,0,0,12,0v-9h28v12a6,6,0,0,0,12,0V345h14v12a6,6,0,0,0,12,0V345h9v12a9.49,9.49,0,0,0,18,0,6,6,0,0,0,12,0V345h12.81a6,6,0,0,0,5.19,3h27v12a6,6,0,0,0,12,0v10a6,6,0,0,0,12,0V348h9v33a6,6,0,0,0,12,0V345h52.09a6.64,6.64,0,0,0-.09,1v24a6,6,0,0,0,12,0V346a6.64,6.64,0,0,0-.09-1H1034v12a6,6,0,0,0,12,0V345h54v15a6,6,0,0,0,12,0V336h7a4,4,0,0,0,4-4v-7A4,4,0,0,0,1119,321Z" transform="translate(-159 -201)" style="fill: #eef241"/>
  </g>
  <g class="_Bun_top_" data-name="&lt;Bun top&gt;">
    <path d="M667.5,201C432,201,241,259.65,241,332h853C1094,259.65,903.05,201,667.5,201Z" transform="translate(-159 -201)" style="fill: #f4d540"/>
  </g>
#5

But when I pasted the code in the style tag which he does in the video it comes up pretty weird like this:

<svg class="Lager_1" data-name="Lager 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1016 309"><path d="M887 309H129.87A47.87 47.87 0 0182 261.13V183h853v78a48 48 0 01-48 48z" fill="#f4d540" data-name="&lt;Bun bottom&gt;"/><rect y="128" width="1016" height="55" rx="27.5" fill="#3d2d33" data-name="&lt;Hamburger&gt;"/><path d="M961.15 127h-401a8.47 8.47 0 00-4.93 1.63 8.47 8.47 0 00-4.93-1.63H384.77a8.47 8.47 0 00-4.93 1.63 8.46 8.46 0 00-4.92-1.63H44.85c-5.44 0-9.85 5.4-9.85 12.06s4.41 12.06 9.85 12.06h46.31c0 6.66 4.41 12.06 9.85 12.06h92.62a9.06 9.06 0 007-3.62h50.57c1.25 4.89 5 8.44 9.4 8.44h197c4.41 0 8.14-3.55 9.4-8.44h83.21a8.47 8.47 0 004.93-1.63 8.47 8.47 0 004.93 1.63H601c1.26 4.89 5 8.44 9.4 8.44h165.52c4.41 0 8.14-3.55 9.4-8.44h175.83c5.44 0 9.85-5.4 9.85-12.06v-8.44c0-6.66-4.41-12.06-9.85-12.06z" fill="#43ef43" data-name="&lt;Kål&gt;"/><g class="_Ketchup_" data-name="&lt;Ketchup&gt;" fill="#ce1124"><path d="M110 137h147v11H110zM328 137h147v11H328zM527 137h147v11H527zM758 137h147v11H758z"/></g><path d="M960 120H411v1H63a4 4 0 00-4 4v7a4 4 0 004 4 4 4 0 014 4 4 4 0 004 4h11v7a6 6 0 0012 0v-7h6v7a6 6 0 0012 0v-7h33v18a6 6 0 0012 0 6 6 0 005-2.69V162a6 6 0 0012 0v-18h16v9a6 6 0 0012 0v-9h16v12a6 6 0 0012 0v-12h6v9a6 6 0 0012 0v-9h27v15a6 6 0 0012 0v-2.81a6 6 0 009-5.19v-7h24v9a6 6 0 008 5.65v.35a6 6 0 0012 0v-2a6 6 0 006-6v-7h12v7a6 6 0 0012 0v5a6 6 0 0012 0v-12h13v9a6 6 0 0012 0v-9h33v7a6 6 0 006 6 5.67 5.67 0 001.38-.17A62.31 62.31 0 01458 159a6 6 0 006-6v-9h42v18a6 6 0 0012 0v-18h61v9a6 6 0 0012 0v-9h28v12a6 6 0 0012 0v-12h14v12a6 6 0 0012 0v-12h9v12a9.49 9.49 0 0018 0 6 6 0 0012 0v-12h12.81a6 6 0 005.19 3h27v12a6 6 0 0012 0v10a6 6 0 0012 0v-22h9v33a6 6 0 0012 0v-36h52.09a6.64 6.64 0 00-.09 1v24a6 6 0 0012 0v-24a6.64 6.64 0 00-.09-1H875v12a6 6 0 0012 0v-12h54v15a6 6 0 0012 0v-24h7a4 4 0 004-4v-7a4 4 0 00-4-4z" fill="#eef241" data-name="&lt;Ost&gt;"/><path d="M508.5 0C273 0 82 58.65 82 131h853C935 58.65 744.05 0 508.5 0z" fill="#f4d540" data-name="&lt;Bun top&gt;"/><g fill="#f4e9ba"><ellipse cx="248.5" cy="68.5" rx="7.5" ry="2.5"/><ellipse cx="297.5" cy="46.5" rx="7.5" ry="2.5"/><ellipse cx="320.5" cy="66.5" rx="7.5" ry="2.5"/><ellipse cx="373.5" cy="46.5" rx="7.5" ry="2.5"/><ellipse cx="401.5" cy="24.5" rx="7.5" ry="2.5"/><ellipse cx="348.5" cy="24.5" rx="7.5" ry="2.5"/><ellipse cx="416.5" cy="49.5" rx="7.5" ry="2.5"/><ellipse cx="439.5" cy="26.5" rx="7.5" ry="2.5"/><ellipse cx="482.5" cy="29.5" rx="7.5" ry="2.5"/><ellipse cx="527.5" cy="7.5" rx="7.5" ry="2.5"/><ellipse cx="568.5" cy="10.5" rx="7.5" ry="2.5"/><ellipse cx="615.5" cy="26.5" rx="7.5" ry="2.5"/><ellipse cx="654.5" cy="26.5" rx="7.5" ry="2.5"/><ellipse cx="646.5" cy="46.5" rx="7.5" ry="2.5"/><ellipse cx="600.5" cy="52.5" rx="7.5" ry="2.5"/><ellipse cx="575.5" cy="31.5" rx="7.5" ry="2.5"/><ellipse cx="534.5" cy="28.5" rx="7.5" ry="2.5"/><ellipse cx="502.5" cy="50.5" rx="7.5" ry="2.5"/><ellipse cx="553.5" cy="55.5" rx="7.5" ry="2.5"/><ellipse cx="662.5" cy="78.5" rx="7.5" ry="2.5"/><ellipse cx="681.5" cy="54.5" rx="7.5" ry="2.5"/><ellipse cx="732.5" cy="49.5" rx="7.5" ry="2.5"/><ellipse cx="708.5" cy="33.5" rx="7.5" ry="2.5"/><ellipse cx="785.5" cy="57.5" rx="7.5" ry="2.5"/><ellipse cx="255.5" cy="43.5" rx="7.5" ry="2.5"/></g></svg>

And If I open the edited file like a normal svg-file in the images-folder in Visual Studio the text is also all over the place, and not as manageable as before. It looks like the sceenshot here, with the text all out to the side:

Screenshot
Screenshot1540×106 14.5 KB

How can I make the edited file more ordered and viewable again? As it was in the first example, with fine lines below each other? Even if it has been edited.

#6

There’s nothing wrong with it, it’s not all over the place, it’s just removed the hardcoded newlines because they’re not needed.

Select “prettify markup” from the options on svgomg

It removes stuff that isn’t needed, like all the group tags that illustrator adds

1 Like
#7