Pictograms have extra padding

[oliviaflory]

What package(s) are you using?

• carbon-pictograms

Detailed description

Describe in detail the issue you're having.

The pictograms have a much larger padding around them than expected from the specs on the IDL documentation
Example of SVG

Expected padding

The extra padding is causing alignment issues between the pictograms and text because the artwork doesn't span to the edge of the container as it did before.
Design intent
using 1px border specs

What is happening
using svg from pictogram package

link to storybook

Is this issue related to a specific component?

All pictogram svg files

What did you expect to happen? What happened instead? What would you like to
see changed?

Is the extra padding around the pictograms an intended, permanent change to the pictogram svgs that designers need to account for?

I would have thought the pictograms would adhere to the size they were drawn to, accounting for the 1px padding specified on the IDL page

What browser are you working in?

All browsers

What version of the Carbon Design System are you using?

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

Digital Design System and Web simplification – launching May 2020

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Please create a reduced test case in CodeSandbox

• Style and vanilla JS:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox
• React:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

Additional information

• Screenshots or code
• Notes

[laurenmrice]

@conradennis ^

I do not have permissions to move this into the pictogram repo, otherwise I would have .

[conradennis]

@laurenmrice thanks for the heads up, the repo is still private and is mostly intended for artwork creation and contribution so it might be worth keeping this one here.

@oliviaflory thanks for calling attention to this issue. The extra padding around the pictogram is intentional and is actually the corresponding container size for the pictograms as in the image shown below.

While the intent is to include this extra space for container shapes in the SVG file for ease of use, it seems like the inclusion of the container space is causing issues with alignment when a container is not needed. I'm not sure how we might address this issue in code but it's something I can bring up with the production team on the brand side and it'll be good to get some perspective from the Carbon folks on how we can avoid this issue moving forward.

[conradennis]

Russ to set up a meeting between Brand team and Carbon to discuss how to deal with this issue.

[ghost]

@conradennis Hey, can you include Olvia Flory in the meeting, please? We are getting questions around this one a lot, we'd like to stay tuned as well.

[conradennis]

@wonilsuhibm yup will let Russ know to include her. Thanks!

[joshblack]

Looking into this, it seems like the artboard is being drawn at 48x48 but the path is not growing to fill the entire space:

[joshblack]

Closing this in favor of #5693! We're going to move forward with processing the SVGs to be in a 32x32 artboard in code and Sketch 👍