Known Participant

質問

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

Forum|Forum|3 years ago
September 25, 2022
返信数 4.
3764 ビュー

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!

H

Hacksaw

Participant

Here in 2025 running into this problem. It seems like the export option sets the artboard to fit the artwork, but in my case I have a drop shadow offset past those edges.

My work around was to add a rectangle snapped on the corners of the art board, with no fill or stroke, so just an invisible path. Then I exported it as SVG, and all is well.

Mylenium

Legend

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作成者

Known Participant

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?

Mylenium

Legend

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作成者

Known Participant

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>

Broken_Record.svg

Monika Gause

Community Expert

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.

Monika Gause

Community Expert

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作成者

Known Participant

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

Community Expert

You have an effect applied?

How is this supposed to look like?

サインアップ

ソーシャルログイン

コミュニティへログイン

ソーシャルログイン

ファイルをウイルススキャンする。

このファイルはダウンロードできません