1

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.

Improve this question
4
  • Hi Helen, just wanted to clarify, are the exporting icons png files or svg files when viewing on a mobile device? If you're using SVG icons, why are you saving them as PNG?
    – AndrewH
    Commented Jul 17, 2015 at 19:14
  • @AndrewH Hi Andrew, I am exporting the SVGs from illustrator for the dev team,but I am just saving my design off Photoshop as a PNG to view it on my device. The icons on my PSD looks perfect, but I don't know how to export the SVGs out to look that way. I am just curious to know if there's a way for me to validate the SVG on my own before sending to the dev team and wasting their time, and what the right process for exporting SVG icons out from illustrator (if I have to actually manually resize them in Photoshop) is. Thanks!
    – Helen
    Commented Jul 17, 2015 at 19:29
  • I'm so confused. If I weren't mod I'd be voting to close this as unclear. I don't get where Photoshop is coming into this question at all. You can export both SVG and PNG from Illustrator. Seems like a completely unnecessary step that is also giving you issues.
    – Ryan
    Commented Jul 17, 2015 at 20:53
  • @Ryan My apologies, trying to phrase this better. My problem is that I am using an SVG copied from Illustrator in my PSD and I need to export the same illustrator asset out in a fixed artboard size. Because the artboard is 64x64 and my asset in Photoshop is different, I want to know what the right process is for exporting assets to be exactly as they are in Photoshop.
    – Helen
    Commented Jul 17, 2015 at 21:01

1 Answer 1

Reset to default
1

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.

SVG Illustrator Options

Click on the world icon to view the SVG in a browser

Improve this answer
4
  • Hey Andrew, thanks but I don't think this is what I am looking for. If I have to use artboards of 64x64 for all icons, and icons are all done in illustrator to be resized on Photoshop with my design, how do I standardize this process and make sure all my icons are consistently sized and placed right in SVGs to be exported? I would like to make it consistent and just using one file for all my icons in illustrator to be EXACTLY the same size as the icons when pasted on Photoshop, but because I am told to stretch the icons to the 64x64 board, I am confused as to what I can do now.
    – Helen
    Commented Jul 17, 2015 at 20:24
  • @Helen You can do just that. In Illustrator make a 64x64 artboard. Create your graphics and size them to the edge of the artboards. After you have exported the SVG, the developers will use CSS to size the SVG to 64px.
    – AndrewH
    Commented Jul 17, 2015 at 21:00
  • thanks for getting back to me. I was told to resize the icons this way (circle, will be a consistent gap around it and not to the edge of the artboard, wider/taller objects will touch the edges). I am just confused, if all my assets are different in sizes and not supposed to be 64x64, how would the dev know how to resize these assets if they are touching the edge? And also, when I've exported my asset as SVG on a 64x64 canvas and clicked on the SVG to preview it, the canvas is not 64x64.
    – Helen
    Commented Jul 17, 2015 at 21:09
  • @Helen That is because you need to specify the size of the SVG in the SVG code. See this example I just made jsfiddle.net/msn4vdtr. You can write the size of the SVG inline width="64" height="64" or use CSS which is what I wrote in the answer above.
    – AndrewH
    Commented Jul 17, 2015 at 21:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.