SVG or other vector file import WITH colors

[valerostudio]

How is it 2025 and we still don't have a way to import a SVG file with color fills? We seriously need a way to import EPS, SVG and PDF cleanly. I would even be ok with importing SWG with color hatches but that is not supported either it seems. Anyone have any tricks for this?

[Dan Rathbun]

There is a commercial plugin called Many Importer that claims to import SVG (and other formats.) But it does not support textures.
There is a link to it's website on the Extension Warehouse store page. Search the EW for "SVG" and you'll find it.

There might have been some test done to see if importing SVG into SketchUp was feasible. I seem to recall someone opening a topic thread about it. (Cannot remember which forum.) Anyway, this could be a new topic for SVG.

The main challenge is that SVG is a 2D drawing format not a 3D model format. I.e., SketchUp has edges with 0 width. SVG has strokes with width. How would you want the 2D vector drawing objects to be converted into SketchUp geometry?

Another challenge (not unsurmountable) is that SketchUp 2025 discontinued the "out of the box" distribution of W3C colors which SVG still uses as it is a web XML format.

Aside: It might be more appropriate to import SVG into LayOut.

[valerostudio]

Honestly would like to import assets from web resources like Toffu.co and www.archade.ai and use them as 2D face me components. I prefer that they remain as vector graphics and not PNGs, and I would ideally like not to have to trace over them (looking for a time saver). I have used a workflow where I import a DXF version and manually create the faces and assign colors, but I was looking for a one-click solution.

[valerostudio]

I did come across this plug-in, but I am not sure if anyone has any experience with it. The website has me a little worried about purchasing something from it. https://3dshouse.com/trace-image-to-3d-sketchup-faces/

[i5963c]

I use Sketchup sometimes for non-professional stuff.
Therefore, I stick to the 2017 Make version with a series of plugins to do what I want to do. Basically, my only 'inconvenience' with this old Make version, and for which I did not find a decent solution via plugins, was the lack of support for importing vector graphics.
On Reddit, I found some 'traces' of a very old plugin to import SVG files (origin 2008, updated in 2013). However, it missed many SVG features. There were also some incompatibilities and dependencies that made it quite complex to install. More recently, Samuel Tallet (author of some great plugins on Sketchucation) removed some of these dependencies, and made it apparently also compatible, up to SU version 2024. But, the old deficiencies in terms of SVG features remained.

Because I had no solution for the import of 2D vector data with my old Sketchup version, I decided - a couple of months ago - to jump into this gap myself (only for personal use). I had to dive into Ruby coding, the Sketchup API and the SVG specifications. Quite an endeavor, but I finally succeeded to come up with something that works... At least for me ...

• I extended the original support for the limited set of SVG shapes (i.e. rectangles, and 'shapes' composed of lines and cubic beziers) to the full set of SVG geometry (i.e. addition of circles, ellipses, horizontal and vertical lines, polylines, polygons, as well as support for elliptical arcs and quadratic beziers, including the smooth variants of cubic and quadratic beziers).
• I added support for all types of transformations (translate, rotate, scale, X- and Y-skew), including combined transforms.
• I added support for fills and line colors in a more robust way.
• I added support for text, although this still faces a number of limitations (as I encounter problems to fully convert some SVG font attributes into equivalent 3D text objects in SU).
• I could substantially improve the import performance, especially for complex SVG files (often from many minutes to just some seconds).

Below are some examples. The first example shows a screenshot of 3 files in my 2D graphics editor (Affinity Designer). Inkscape is a popular - and open source - alternative. Such editors allow to create SVG files, can read multiple vector formats (e.g. DWG, DXF, PDF) and also support the conversion towards SVG.

The first example is a site plan, with lots of text (measurements) and line colors, the second is a garden plan with multiple color-filled shapes, and the last one is a more 'graphical object' (that demonstrates an 'inconsistency' between 2D and 3D design constraints - cf. below).

()

Next, you'll see screenshots of the corresponding SVG imports in Sketchup.

Due to the inherent differences between 2D and 3D modeling approaches, there are some caveats to take into account. The last 2 figures (the dragon) explain this. SVG works with lines and shapes. Lines ('strokes' in SVG) have a thickness. Shapes can be filled with color, but SVG shapes can also be put 'on top' of each other ('layered' and blended, like in a photo editor). However such layering is not possible when converting the 2D drawing into a 3D modeling tool like Sketchup. You'll end up with 'Z-fighting' of different shapes on the ground plane. All lines and shapes are properly imported, but they may overlap, which leads to the 'black dragon'. The overlap between the different shapes can be - manually ! - manipulated by selecting the shape in the outliner and cutting it out of the larger shape. You can 'visualize' the different composing shapes by using the X-Ray mode (cf the second dragon figure). Alternatively, this 'avoidance of shape overlap' can also be performed (and likely more efficiently) in a 2D editor, before exporting it to SVG, and importing it afterwards in Sketchup.

My 'extension' supports colored shape fills and lines, including transparency. Line widths (~edges) are (as always in SU) without stroke thickness.

The (optional) shape fill 'enhancements' in SVG (i.e. gradients, patterns, filters, masks) are, due to the lack of an equivalent, non-rasterized alternative for SU faces, always 'solid colors'.

If any such 'enhancements' would be required, this must be done (manually!!) in Sketchup via the import of bitmap files as material textures, after the SVG file is loaded. However, be aware that the rasterized nature of such textures, nullifies the benefits of the vectorial nature of SVG!!!

The 'extension' supports various color definitions (RGB, 3-digit and 6-digit hex, as well as the W3C color names). As Dan Rathbun pointed out above, this last color coding mechanism may not be supported anymore in SU2025. It should be possible to adapt the extension to translate these color names into equivalent RGB values, but this is currently not implemented, as I don't use SU2025. Thus, I also have no clue what may be the impact of the new PBR materials for my 'SVG Importer'...

As mentioned above, the support for texts is currently not 'perfect', due to inconsistencies between the way the SVG specification allows text formatting and the way SU's 3D text can be manipulated via the Sketchup Ruby API. However, if a 100% accurate import of the text elements (e.g. a detailed font design) is absolutely necessary, this can be achieved by 'translating the text into curves' with a 2D graphical editor. In this case, the text is handled like a regular 'SVG shape'. This will lead to a larger SVG file size. In case of lots of text, it might be easier to create the text directly in SU as well.

There is no documentation available for this 'personal extension'. I'm also not pretending that it is 'professional-grade' software. E.g. the only dialog box (to capture some parameters) is an old-fashioned (ugly) Sketchup UI.Inputbox. I had no need or intention to learn how to code HTML dialog boxes and how they interact with Sketchup...

I don't know your exact needs in terms of SVG import. But, if the above clarification of what I did, looks like a potential match, I have no objection to share it (without any guarrantee and/or liability). If so, please reach out to me via a PM on this forum.

[Dan Rathbun]

@i5963c said in SVG or other vector file import WITH colors:

It should be possible to adapt the extension to translate these color names into equivalent RGB values, but this is currently not implemented, as I don't use SU2025.

To be specific, SketchUp 2025+ no longer comes "out of the box" with the "Colors-Named" W3C materials collection.

But, users may be able to import them from the new 3D Warehouse (it now has resources.)

However, for a Ruby extension this is not a problem as the SketchUp Ruby API still supports the color names. See: https://ruby.sketchup.com/Sketchup/Color.html#names-class_method
So your code just assigns one of the color names to a Drawingelement and SketchUp converts it into a material (and adds it to the "In Model" collection.)
See: https://ruby.sketchup.com/Sketchup/Drawingelement.html#material=-instance_method

The only caveat is that SketchUp does not support some of the gray/grey spellings variants, and may be missing a couple of the more obscure color names.

[i5963c]

@Dan-Rathbun

@Dan-Rathbun said in SVG or other vector file import WITH colors:

The only caveat is that SketchUp does not support some of the gray/grey spellings variants, and may be missing a couple of the more obscure color names.

Dan, thanks to clarify that my Ruby SVG Importer will also work with SU2025.
W.r.t. the spelling variants and missing names, my current plugin handles this already, based on your highly appreciated advise (couple of months ago in a thread on the Sketchup forum) .

As said in my previous post, I'm still facing some problems with text in my plugin.

I'll try to explain:
In my plugin, I translate SVG graphical information into Sketchup geometry on the ground plane (Z = 0).
W.r.t. text elements, I convert the 2D SVG text into (flat) 3D text objects in Sketchup. In SVG, the (Y-)position of (horizontal) text is based on the 'baseline' of the text. This baseline is a virtual horizontal line on which most characters 'sit'.
However, in SVG it's also possible to differentiate the position and look and feel (color, size, ...) of indiviual characters in a text string. This can be accomplished e.g. with a 'tspan' SVG element.
In such cases with specific settings for individual characters, these characters translate into separate SVG (sub)entities ('text' or 'tspan'), which in turn convert into multiple Sketchup 3D-text objects (subgroups of the main text group).

To clarify my problem, in the figure below (screenshot of my 2D editor), I show 2 SVG textstrings, composed of the first 7 characters of the alphabet ('a' to 'g'). For the first string (on top) all characters have the same characteristics, and thus create a single object. In the second textstring (at the bottom), the 'd' has a blue color, and the 'g' has a red color. This splits this textstring into 4 substrings ('abc', 'd', 'ef', and 'g').

The screenshot below shows the result after importing this SVG file in Sketchup
The first string translates into 1 Sketchup 3D-text object, and is OK. However, in the second string with 4 substrings, there is a problem with the vertical alignment of the red 'g'.

Apparently in Sketchup, the vertical position of the 3D text object is not based on the Y-position of the font baseline, but it seems to take the lowest bottom of all characters in each text (sub)string as the baseline. This 'bottom' can be above the baseline (e.g. "-=°~") or below the baseline (e.g. "gpq"). If the bottom of a substring lies above the font baseline, all characters in the substring are pushed downwards (to align with the baseline). Similarly, characters belonging to a substring with a bottom below the font baseline are pushed upwards (cf. the red "g" in the figure above).

Therefore, it looks to me as if it is impossible to vertically align multiple 3D-text objects in Sketchup so that these objects join a common baseline?

Is there any source of information on how I can fix this (via the Ruby API of course)? I've searched already extensively, but couldn't find anything. It looks to me as a 'bug' in Sketchup, or at least as an ommission with the implementation of 3D texts.
Any suggestions or help would be greatly appreciated.

[Didier Bur]

@valerostudio

To convert images into 'shapes' without having to trace over them, look at this: [https://sketchucation.com/plugin/2893-pic2shape]

[Dan Rathbun]

@i5963c I would say it is a bug, although it is likely been this way forever.
Check the SketchUp API tracker at GitHub to see if it has been reported yet.

The GUI 3D Text tool puts the resultant text geometry within a component context.
This way it can be moved around, rotated, etc.

The API use of Entities.add_3d_text should also be inserting into a component or group context. This context can also have subgroups. So the workaround is to apply a transitional transform to the "g" subgroup and align it.

Unfortunately, the vertical text alignment constants are for drawing text to the view for tools and overlays. So they will not apply to 3D text.