: Problems with exporting SVG assets out of Illustrator My workflow generally goes like this, design the icon on Illustrator and paste the icon and resize it for the design. Because our dev team
My workflow generally goes like this, design the icon on Illustrator and paste the icon and resize it for the design. Because our dev team needs SVG icons and not just the typical 1x,2x,3x assets, I have to create an artboard and export them out.
I got my icon from Illustrator, then paste the asset onto Photoshop as a smart object to be used, and so, while I resize the icon to fit and look good with other icons around it, it is no longer the original size when first pasted from Illustrator.
The first thing is, I have to export assets in fixed individual artboards of 64x64 in Illustrator as SVGs, which I did. All these assets are sized to fit the size of the 64x64 artboard canvas. When the devs are using these SVGs I provided, a few of the assets are coming out too big.
I went into my PSD where the icons are sized right when viewed, but realized that because I resized them, the % of the W and H is different for all the icons in my PSD. (Some is 40% of the original pasted asset, some is 35%).
So, I guess I am just confused as to how I can export the asset out right from Illustrator as SVG if I have to resize the asset in Photoshop. I am tapping on the smart object in Photoshop to lead me to the artboard in Illustrator and exporting my artboard as an SVG from there.
So my question is, what is the right way of exporting the SVG icon out?And also, is there a way for designers to view the SVG asset and not the PNG version of a design on the phone)?
All the assets in the app are using a set artboard canvas, so I am not able to individually create artboards of different sizes.
Thanks.
More posts by @Turnbaugh909
1 Comments
Sorted by latest first Latest Oldest Best
You can make the SVG file at any size you want using CSS. If you added a class to the SVG
HTML
<img class="icon" src="my-svg-file.svg">
CSS
.icon {
width: 50px;
}
The icon will now be 50px wide.
This is a pretty in depth tutorial CSS Tricks - Using SVG.
An important thing to remember
Notice the artboard is cropped up right agains the edges of the
design. Canvas matters in SVG just like it would in PNG or JPG.
- CSS Tricks
Here is a working example from the CSS Tricks article. You will see how the same SVG is used by CSS is applied to give 3 different sizes.
You can also view the SVG output on the web. There is a dialog box for this in Illustrator. Once you're don with your icon go to file - save as and save as SVG. A dialogue box will appear.
Click on the world icon to view the SVG in a browser
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.