• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

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

Community Beginner ,
Sep 25, 2022 Sep 25, 2022

Copy link to clipboard

Copied

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!

TOPICS
Bug , Draw and design , Import and export

Views

71

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 25, 2022 Sep 25, 2022

Copy link to clipboard

Copied

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?

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 26, 2022 Sep 26, 2022

Copy link to clipboard

Copied

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)

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 26, 2022 Sep 26, 2022

Copy link to clipboard

Copied

You have an effect applied?

 

How is this supposed to look like?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 28, 2022 Sep 28, 2022

Copy link to clipboard

Copied

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"

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 27, 2022 Sep 27, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 28, 2022 Sep 28, 2022

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 29, 2022 Sep 29, 2022

Copy link to clipboard

Copied

LATEST

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 29, 2022 Sep 29, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 29, 2022 Sep 29, 2022

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines