Highlighted

Help with svg placing

New Here ,
Jul 28, 2020

Copy link to clipboard

Copied

Hello guys, I am a designer working with a programmer. Im making a custom icon kit for the project, everything made in illustrator cc and exported individually in svg, but every time he tries to place the icons they seen to be cropped and weirdly resized.

 

When he imports an icon set such as the ones found in flaticon, the problem does no occur, but even when i get those same icons, throw then in Illustrator and export again, there it is.

 

Am I doing something wrong in the export process? Does any of you experienced something like this?

 

Heres a image of the problem, this icon was taken out of a flaticon pack and re-exported, it is being

cropped both in the top and bottom: https://imgur.com/VF6Oady

TOPICS
Draw and design, How to, Import and export

Views

50

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

Help with svg placing

New Here ,
Jul 28, 2020

Copy link to clipboard

Copied

Hello guys, I am a designer working with a programmer. Im making a custom icon kit for the project, everything made in illustrator cc and exported individually in svg, but every time he tries to place the icons they seen to be cropped and weirdly resized.

 

When he imports an icon set such as the ones found in flaticon, the problem does no occur, but even when i get those same icons, throw then in Illustrator and export again, there it is.

 

Am I doing something wrong in the export process? Does any of you experienced something like this?

 

Heres a image of the problem, this icon was taken out of a flaticon pack and re-exported, it is being

cropped both in the top and bottom: https://imgur.com/VF6Oady

TOPICS
Draw and design, How to, Import and export

Views

51

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
Jul 28, 2020 0
Adobe Community Professional ,
Jul 28, 2020

Copy link to clipboard

Copied

Can you show the icon as it is supposed to appear?

 

What exact steps are you going through to export to 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
Reply
Loading...
Jul 28, 2020 1
New Here ,
Jul 28, 2020

Copy link to clipboard

Copied

The original is suposed to look like this, I followed several tutorials in different ways to export, but originally I simply selected the whole icon, pressed the right mouse button and clicked in export selection, then proceeded to select svg. 
The svg configurations where always in default, and the only difference I can possibly see beetween my icons and the Flaticons ones is in the size.  

I tried setting up invisible components to serve as a margin, exporting components on their own artboards, expanding the shapes, none worked :´(
agenda.png

 

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
Reply
Loading...
Jul 28, 2020 0
New Here ,
Jul 28, 2020

Copy link to clipboard

Copied

Here is one of my icons source code:

 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.57 84.41"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;}</style></defs><title>Ativo 4</title><g id="Camada_2" data-name="Camada 2"><g id="Camada_1-2" data-name="Camada 1"><path class="cls-1" d="M69.11,82.79,6.81,50.71l-.1-.05-.49-.22-.35-.17-.19-.1h0l-.18-.11-.4-.25-.14-.09-.12-.09,0,0-.45-.33-.09-.08-.16-.14-.4-.37-.08-.08-.17-.19c-.12-.12-.23-.24-.34-.37L3,47.94c-.06-.08-.11-.16-.17-.23s-.18-.23-.26-.35a.86.86,0,0,1-.1-.16A2,2,0,0,1,2.38,47l-.09-.14c0-.08-.1-.16-.14-.24L2,46.41A1,1,0,0,1,2,46.26L1.84,46l-.08-.16-.12-.29s0,0,0,0a.76.76,0,0,1,0-.11l-.08-.21L1.45,45c0-.11-.06-.22-.1-.33l-.06-.24v0a2.44,2.44,0,0,1-.06-.26,1.7,1.7,0,0,1-.06-.31c0-.1,0-.2,0-.3s0-.2-.05-.29,0-.19,0-.28,0-.22,0-.33,0-.21,0-.32,0-.08,0-.12H1c0-.05,0-.09,0-.13s0-.21,0-.32,0-.22,0-.33,0-.18,0-.27,0-.2.05-.3,0-.2,0-.3a1.7,1.7,0,0,1,.06-.31A2.44,2.44,0,0,1,1.28,40v0l.06-.24c0-.11.07-.22.1-.33l.06-.17c0-.07.05-.14.08-.2a.36.36,0,0,1,0-.11s0,0,0,0l.12-.29.08-.16L2,38.15A.91.91,0,0,1,2,38l.12-.23c0-.08.09-.15.14-.23l.09-.15a2,2,0,0,1,.12-.19,1.4,1.4,0,0,1,.1-.16c.08-.12.17-.23.26-.34A2,2,0,0,1,3,36.48l.09-.11A3.8,3.8,0,0,1,3.45,36l.17-.19.08-.08.4-.37a1.07,1.07,0,0,0,.16-.14l.09-.08.44-.33,0,0,.11-.09.14-.09c.13-.09.26-.16.4-.24l.18-.12h0l.2-.11L6.22,34l.49-.22.1,0L69.11,1.63a9.12,9.12,0,1,1,6.63,17L45.63,33.08h66.82a9.12,9.12,0,0,1,9.12,9.13h0a9.12,9.12,0,0,1-9.12,9.12H45.63L75.74,65.79A9.12,9.12,0,0,1,80.92,77.6h0A9.12,9.12,0,0,1,69.11,82.79Z"/></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
Reply
Loading...
Jul 28, 2020 0
Adobe Community Professional ,
Jul 28, 2020

Copy link to clipboard

Copied

So your stroke is not outlined?

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
Reply
Loading...
Jul 28, 2020 0
New Here ,
Jul 28, 2020

Copy link to clipboard

Copied

I tried both, outlined and only stroke 

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
Reply
Loading...
Jul 28, 2020 0