Exporting Vector Artwork to SVG crops it and clips it's edges?

[ostettd]

Hi there,

Not sure why this is happening. When exporting this vector artwork to SVG it is clipping it's edges, the top and bottom are more obvious, but with careful inspection you can see the left and right sides are getting clipped off too. Anyone know whats going on?

Attached images for clarification. These are just two screenshots, one is from the .ai file so you can see the full artwork, and the other is of the SVG so you can see the clipping occuring.

Thank you!

[Monika Gause]

What's in the file? Are those just simple paths?

How is the file structured in the Layers panel?

Which options are you using when exporting the SVG?

Which app are you using to view the SVG?

[ostettd]

Yes they are just simple paths, there are some clipping masks though (the shine effect, and the "broken" parts of the record are the full record, but with the clipping mask hiding the majority of it).

Everything is on 1 layer (screenshot attached)

RE: SVG export options: Screenshot attached

I'm using preview on the mac, but when uploading the file to Wix for my website, it still clips just like the preview shows. Interestingly, when I import the SVG back into illustrator i get an error msg, and the record looks wildy different, but the clipping isnt occuring (screenshots attached)

[Monika Gause]

You have an effect applied?

How is this supposed to look like?

[ostettd]

No effects are applied to any of the pieces. 

In my original post, the SVG should look like the picture titled "Ai File" but it is cutting off the edges as seen in the picture titled "SVG File"

[Mylenium]

It would be useful to have the actual SVG file/ SVG code. This looks like the box is simply calculated wrongly. At the very least I would delete the invisible layers before exporting. This has been known to throw off things occasionally since AI wrongly considers this data.

Mylenium

[ostettd]

I have deleted some weird things in the layers panel that I didn't know, and same issue. Attached is a new screenshot of the layers panel, and the new SVG file itself. Alternativly, the text below is the code (right click SVG file and open with text edit)

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 887.91 916.55">
<defs>
<style>
.cls-1, .cls-2, .cls-3, .cls-4, .cls-5 {
fill: none;
}

.cls-6 {
filter: url(#luminosity-noclip-3);
}

.cls-7 {
filter: url(#luminosity-noclip-4);
}

.cls-8 {
filter: url(#luminosity-noclip-5);
}

.cls-9 {
clip-path: url(#clippath);
}

.cls-10 {
mask: url(#mask);
}

.cls-11 {
filter: url(#luminosity-noclip-2);
}

.cls-12 {
fill: #fff;
}

.cls-13 {
fill: #d83124;
}

.cls-14 {
fill: #373737;
}

.cls-15 {
clip-path: url(#clippath-1);
}

.cls-16 {
clip-path: url(#clippath-2);
}

.cls-2 {
stroke: #000;
}

.cls-2, .cls-3, .cls-4, .cls-5 {
stroke-width: 10px;
}

.cls-2, .cls-3, .cls-5 {
stroke-miterlimit: 11.34;
}

.cls-3, .cls-4, .cls-5 {
stroke: #fff;
}

.cls-4 {
stroke-miterlimit: 11.46;
}

.cls-4, .cls-5 {
stroke-linecap: round;
}

.cls-17 {
mask: url(#mask-3);
}

.cls-18 {
mask: url(#mask-2);
}

.cls-19 {
mask: url(#mask-1);
}
</style>
<filter id="luminosity-noclip-2" data-name="luminosity-noclip" x="63.24" y="53.12" width="769.95" height="810.32" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-color="#fff" result="bg"/>
<feBlend in="SourceGraphic" in2="bg"/>
</filter>
<mask id="mask" x="63.24" y="53.12" width="769.95" height="810.32" maskUnits="userSpaceOnUse">
<g class="cls-11">
<g>
<g>
<circle class="cls-2" cx="448.22" cy="458.28" r="342.25"/>
<circle class="cls-2" cx="448.22" cy="458.28" r="296.11"/>
<circle class="cls-2" cx="448.22" cy="458.28" r="249.98"/>
<circle class="cls-2" cx="448.22" cy="458.28" r="203.84"/>
</g>
<path id="path5890" d="M513.13,53.12l28.91,45.43v54.72s35.1,60.91,35.1,60.91l7.23,60.91-10.32,68.14,67.11-6.19,76.4-41.3,58.85-8.26,56.79-76.4-130.09-140.41-189.97-17.55Z"/>
<path id="path5890-2" data-name="path5890" d="M383.3,863.44l-28.91-45.43v-54.72s-35.1-60.91-35.1-60.91l-7.23-60.91,10.32-68.14-67.11,6.19-76.4,41.3-58.85,8.26-56.79,76.4,130.09,140.41,189.97,17.55Z"/>
</g>
</g>
</mask>
<clipPath id="clippath">
<path id="path5890-3" data-name="path5890" class="cls-1" d="M539.13,0l30.04,44.69,1.37,54.7,36.62,60.02,8.75,60.71-8.62,68.38,66.93-7.87,75.34-43.2,58.62-9.73,54.85-77.8L729.49,12.79,539.13,0Z"/>
</clipPath>
<filter id="luminosity-noclip-3" x="137.13" y="59.41" width="694.5" height="694.5" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-color="#fff" result="bg"/>
<feBlend in="SourceGraphic" in2="bg"/>
</filter>
<mask id="mask-1" x="137.13" y="59.41" width="694.5" height="694.5" maskUnits="userSpaceOnUse">
<g class="cls-6">
<g>
<circle class="cls-2" cx="484.38" cy="406.66" r="342.25"/>
<circle class="cls-2" cx="484.38" cy="406.66" r="296.11"/>
<circle class="cls-2" cx="484.38" cy="406.66" r="249.98"/>
<circle class="cls-2" cx="484.38" cy="406.66" r="203.84"/>
</g>
</g>
</mask>
<clipPath id="clippath-1">
<path id="path5890-4" data-name="path5890" class="cls-1" d="M357.3,916.55l-30.04-44.69-1.37-54.7-36.62-60.02-8.75-60.71,8.62-68.38-66.93,7.87-75.34,43.2-58.62,9.73-54.85,77.8,133.56,137.11,190.35,12.79Z"/>
</clipPath>
<filter id="luminosity-noclip-4" x="64.8" y="162.65" width="694.5" height="694.5" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-color="#fff" result="bg"/>
<feBlend in="SourceGraphic" in2="bg"/>
</filter>
<mask id="mask-2" x="64.8" y="162.65" width="694.5" height="694.5" maskUnits="userSpaceOnUse">
<g class="cls-7">
<g>
<circle class="cls-2" cx="412.05" cy="509.89" r="342.25"/>
<circle class="cls-2" cx="412.05" cy="509.89" r="296.11"/>
<circle class="cls-2" cx="412.05" cy="509.89" r="249.98"/>
<circle class="cls-2" cx="412.05" cy="509.89" r="203.84"/>
</g>
</g>
</mask>
<clipPath id="clippath-2">
<polygon class="cls-1" points="0 388.28 887.91 528.28 887.91 901.8 513.96 901.8 373.96 14.92 0 14.92 0 388.28"/>
</clipPath>
<filter id="luminosity-noclip-5" x="63.24" y="53.12" width="769.95" height="810.32" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
<feFlood flood-color="#fff" result="bg"/>
<feBlend in="SourceGraphic" in2="bg"/>
</filter>
<mask id="mask-3" x="63.24" y="53.12" width="769.95" height="810.32" maskUnits="userSpaceOnUse">
<g class="cls-8">
<g>
<g>
<circle class="cls-2" cx="448.22" cy="458.28" r="342.25"/>
<circle class="cls-2" cx="448.22" cy="458.28" r="296.11"/>
<circle class="cls-2" cx="448.22" cy="458.28" r="249.98"/>
<circle class="cls-2" cx="448.22" cy="458.28" r="203.84"/>
</g>
<path id="path5890-5" data-name="path5890" d="M513.13,53.12l28.91,45.43v54.72s35.1,60.91,35.1,60.91l7.23,60.91-10.32,68.14,67.11-6.19,76.4-41.3,58.85-8.26,56.79-76.4-130.09-140.41-189.97-17.55Z"/>
<path id="path5890-6" data-name="path5890" d="M383.3,863.44l-28.91-45.43v-54.72s-35.1-60.91-35.1-60.91l-7.23-60.91,10.32-68.14-67.11,6.19-76.4,41.3-58.85,8.26-56.79,76.4,130.09,140.41,189.97,17.55Z"/>
</g>
</g>
</mask>
</defs>
<g id="Layer_1-2" data-name="Layer 1">
<g>
<g class="cls-10">
<circle cx="448.22" cy="458.28" r="386.58"/>
</g>
<g class="cls-9">
<g class="cls-19">
<circle cx="484.38" cy="406.66" r="386.58"/>
</g>
</g>
<g class="cls-15">
<g class="cls-18">
<circle cx="412.05" cy="509.89" r="386.58"/>
</g>
</g>
<g class="cls-16">
<g class="cls-17">
<circle class="cls-14" cx="448.22" cy="458.28" r="386.58"/>
</g>
</g>
<g>
<g id="path863-0">
<circle class="cls-13" cx="448.22" cy="458.28" r="130"/>
<path class="cls-12" d="M448.22,338.28c66.27,0,120,53.73,120,120s-53.73,120-120,120-120-53.73-120-120,53.73-120,120-120m0-20c-37.4,0-72.55,14.56-98.99,41.01s-41.01,61.6-41.01,98.99,14.56,72.55,41.01,98.99c26.44,26.44,61.6,41.01,98.99,41.01s72.55-14.56,98.99-41.01c26.44-26.44,41.01-61.6,41.01-98.99s-14.56-72.55-41.01-98.99c-26.44-26.44-61.6-41.01-98.99-41.01h0Z"/>
</g>
<g>
<path id="path2185-8" class="cls-5" d="M487.5,507.6v-27.04"/>
<g id="g1989">
<path id="path1934" class="cls-4" d="M390.47,401.79l37.11,37.11"/>
<path id="path1934-7" class="cls-4" d="M427.58,401.79l-37.11,37.11"/>
<path id="path1934-3" class="cls-4" d="M468.85,401.79l37.11,37.11"/>
<path id="path1934-7-7" class="cls-4" d="M505.96,401.79l-37.11,37.11"/>
</g>
<path id="path1991" class="cls-5" d="M368.26,490.49c53.3-20.89,106.6-22.51,159.9,0"/>
<path id="path2185-4" class="cls-3" d="M466.45,476.57v30.44c0,6.44,2.72,12.67,7.71,16.74,7.78,6.34,18.88,6.34,26.66,0,4.99-4.07,7.71-10.3,7.71-16.74v-24.65"/>
</g>
</g>
</g>
</g>
</svg>

[Monika Gause]

I don't understand that file.

How did you build that? So many masks. Personally I like to build things in a way that I can still edit them. But when everything is done and OK, then expand and cut, so you don't have too many paths in it.

ALso: did you use SVG as your working file format? Then maybe with every round of editing you added another clipping mask where none is necessary.

[Mylenium]

All your paths have odd offsets. It's like you tried to manually build a drop shadow with duplicate paths. The content is only visible where the bounding boxes of the outermost paths intersect and that's why stuff gets clipped. You also have a view box much larger than you actual content and fractional pixel values. All of this leads me to believe that you need to fix your document setup. Check the unit settings and document DPI, crop the artboard to the content and try again.

Mylenium

[ostettd]

I have no effects applied though? It's all paths.

I'm not fully understanding your second sentence as to why things get clipped. Somehow the bounding box isn't big enough for where the outermost paths intersect in this file? How can I fix that?