I've been asked by our web team to create SVGs that will occupy a 800x400 pixel container on a web page. I've set up an artboard to those dimensions and filled it with some stock vector art elements, some of which extends beyond the edge of the artboard. I did some research to find out how to crop these elements to the artrboard, but none of the solutions presented seemed ideal. So I trimmed these elements by hand to bring them flush with the edges of the artboard.
I then opened the exported SVG in Photoshop to make sure it worked as intended. The first issue was that the aspect ratio was slightly off. It wants to open at 800x406, rather than 800x400. Then, when PS rasterizes the graphic, the artwork has a transparent border around it (see example). I've gone back to the AI file and tried to make sure nothing extends beyond the artboard and that the atrwork fills the entire artboard. It seems almost impossible to be sure that my anchor points are on the precise edge of the artboard, even with snap turned on.
Can anyone tell me where I'm going wrong here? I'm fairly comfortable with Illustrator, but vector drawing isn't my primary discipline I rarely have to use it. I'm certain my work process could use some help.
Thanks in advance for any insight offered. I appreciate it.
Which version of Illustrator are you using?
Can you perhaps share a sample Illustrator file (.ai)?
Illustrator 25.1. I don't see a way to attach the .ai file (only accepts JPG, GiF, or PNG). I've attched PNGs of the AI artboard (all objects selected) and what it looks like when the resulting SVG is opened in Photoshop. Hopefully that will help reveal the nature of my incompetence.
You cannot check an SVG by opening it in Photoshop. Leave out Photoshop. Your developers need to check those SVGs if you can't do it.
I appreciate the response. Can you elaborate? If I fill an 800x400 artboard edge to edge and export it as an SVG, why wouldn't it open in Photoshop as an 800x400 raster graphic with no transparency? I don't understand what's going on.
You will probably need to ask in the Photoshop forum how Photoshop imports an SVG.