Maintaining Artwork Dimensions

Community Beginner ,
Feb 02, 2021 Feb 02, 2021

Copy link to clipboard

Copied

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.

 

 

 

 

 

 

TOPICS
Draw and design, Tools

Views

93

Likes

translate

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
Adobe Community Professional ,
Feb 02, 2021 Feb 02, 2021

Copy link to clipboard

Copied

Which version of Illustrator are you using?

 

Can you perhaps share a sample Illustrator file (.ai)?

 

Likes

translate

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 ,
Feb 02, 2021 Feb 02, 2021

Copy link to clipboard

Copied

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.

 

 

AI Screenshot 01.png

 

PS Screenshot 01.png

Likes

translate

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
Adobe Community Professional ,
Feb 03, 2021 Feb 03, 2021

Copy link to clipboard

Copied

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.

Likes

translate

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 ,
Feb 05, 2021 Feb 05, 2021

Copy link to clipboard

Copied

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. 

Likes

translate

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
Adobe Community Professional ,
Feb 06, 2021 Feb 06, 2021

Copy link to clipboard

Copied

You will probably need to ask in the Photoshop forum how Photoshop imports an SVG.

Likes

translate

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