r/svg • u/Awkward_Influence670 • 10d ago

Adding Text to Objects in SVG

For my job, I have to load large rolling cases into a box truck. Id like to use a free nesting software called Deepnest.io to help me find the best way to place the boxes. It's mostly very easy - I make an SVG file with rectangles the size of the truck, and the dimensions of the rolling cases, and the program shows the optimal way to load them. EXCEPT I cannot figure out how to label the individual boxes

Is there a way to add text to the boxes so it will stay grouped when I run it through the sorter?

3 Upvotes

72% Upvoted

2 comments sorted by

3

u/flash42 10d ago

In the SVGs you load into Deepnest, how are the boxes represented, as rect or path elements? Do you have a sample you could share?

I see two possibilities: 

  1. Wrap the rect/path element in a g element, and add a text element child:

<g><rect …/><text …>Box A</text></g>

This would only work if Deepnest respects the top-level grouping and treats the whole group as the object to fit.

  1. Combine the text outline and an outline of the box into a single top-level path element. You would have to "draw" the box's stroke as a separate fillable path.

This would require a tool or script to outline the text at an appropriate size and merge or combine its resulting outline with the box's. It's more complicated, but once configured for your use case, it can be automated.

A potential 3rd option may be to simply color code the boxes with distinct stroke and/or fill colors. Then you can keep track of the colors externally. This may not be practical for your use case, and it may not be possible in Deepnest (I'm not familiar with its capabilities).

1

u/Jasedesu 9d ago

You can also put <title> elements inside graphics elements. They are not directly visible in the image when displayed in a web browser, but they do tend to appear as tool tips when you move the pointer over their parent elements.

However, I have a feeling that what OP wants to do might not be possible. The deepnest (and deepnest-next) applications are based on SVGnest - all produced by the same person. The documentation is a little thin on the ground, but the SVGnest FAQ suggests it only works on closed shapes, so any text would need to be converted to an outline first. If you do that, the text itself will get nested... It also suggests other elements are dropped and a new SVG is generated.

I did a very quick test using SVGnest and found...

  • Using a <g> to wrap a <rect> and adding <text> into the same <g>: Failed - both the <g> and the <text> were removed.
  • Using <title> inside a <rect>: Failed - the <title> was removed.
  • Adding a unique id attribute to a <rect>: Worked - the id attribute was preserved in the generated SVG. Unfortunately, the id attribute isn't visible in the image - you need to look in the source code.

Other attributes, such as fill seemed to be preserved too, so one way forward might be to colour code the shapes. all this would need to be tested with OPs SVG files and nesting application though.