SVGMobject doesn't display svg image properly

[underdog-programmer]

Description of bug / unexpected behavior

The SVG image (an electrical circuit) consists of elements and their corresponding labels. Manim can export the circuit properly without showing any error! but the labels of the circuit elements are unfortunately missing!. Please fix the problem.
The svg image is created in Inkspace environment. And the missing lables are the text elements of Inkspace environment.

Code:

class SVGTest(Scene):
    def construct(self):
        svg = SVGMobject('./svg_images/circuit')
        svg.set(height = config['frame_height']-1)
        self.play(
            DrawBorderThenFill(svg)
        )

Expected behavior

Here is the original image in png format as svg is not supported on Github.

Manim exported Scene:

SVGTest.mp4

How to reproduce the issue

Code for reproducing the problem

Additional media files

Logs

Terminal output

PASTE HERE OR PROVIDE LINK TO https://pastebin.com/ OR SIMILAR

System specifications

System Details

• OS (with version, e.g Windows 10 v2004 or macOS 10.15 (Catalina)):

• RAM:

• Python version (python/py/python3 --version):

• Installed modules (provide output from pip list):

PASTE HERE

LaTeX details

• LaTeX distribution (e.g. TeX Live 2020):
• Installed LaTeX packages:

FFMPEG

Output of ffmpeg -version:

PASTE HERE

Additional comments

[naveen521kk]

Text elements aren't supported in SVGMobject, you should be having the option to convert them to paths in Inkscape(I think saving as plain SVG will do), after which it should be working on Manim.

[underdog-programmer]

@naveen521kk All the elements either drawing or text (no external text included) are created in Inkspace. I don't understand what you mean by converting elements to paths in Inkspace, please can you clarify it?

[naveen521kk]

@underdog-programmer You should share your SVG file, first. Second, Inkscape saves Texts as SVG Text which isn't supported in Manim. There should be an option to convert them.

[underdog-programmer]

@naveen521kk As Github doesn't support to upload svg file, so I provide a drive link of my svg file. You can see the file from the link.

[naveen521kk]

@underdog-programmer I downloaded your SVG file and it has <text> which isn't supported by Manim. Try search "convert text to the path on Inkscape" on a search engine for an answer to convert to path element which manim supports. (sorry, if this is harsh, I didn't know how to actually)

[behackl]

In order to convert text to paths in Inkscape, first select a Text object, and then choose "Path > Object to Path" in the menu.

[underdog-programmer]

@naveen521kk @behackl Thank you! The problem is solved!

SVGTest.mp4

[clayton-r]

If you don't want to use inkscape you can use pycairo.

from xml.etree.ElementTree import Element, ElementTree, fromstring, register_namespace
import cairo


def render_text_to_path_cairo(text, x, y, font_family="Sans", font_size=14, font_style="normal", font_weight="normal",
                              fill_color='black'):
    """
    svg with text elements -> svg with path elements. 
    
    font_style options: normal, italic, oblique
    font_weight options: normal, bold
    """
    surface = cairo.SVGSurface(None, 1000, 1000)
    context = cairo.Context(surface)

    slant = {
        'normal': cairo.FONT_SLANT_NORMAL,
        'italic': cairo.FONT_SLANT_ITALIC,
        'oblique': cairo.FONT_SLANT_OBLIQUE
    }.get(font_style.lower(), cairo.FONT_SLANT_NORMAL)

    weight = {
        'normal': cairo.FONT_WEIGHT_NORMAL,
        'bold': cairo.FONT_WEIGHT_BOLD
    }.get(font_weight.lower(), cairo.FONT_WEIGHT_NORMAL)

    # Try requested font family, fallback to Sans if not available
    try:
        context.select_font_face(font_family, slant, weight)
    except:
        context.select_font_face("Sans", slant, weight)

    context.set_font_size(font_size)

    context.move_to(x, y)
    context.text_path(text)
    path_data = []

    for type_, points in context.copy_path():
        if type_ == cairo.PATH_MOVE_TO:
            path_data.append(f"M {points[0]} {points[1]}")
        elif type_ == cairo.PATH_LINE_TO:
            path_data.append(f"L {points[0]} {points[1]}")
        elif type_ == cairo.PATH_CURVE_TO:
            path_data.append(
                f"C {points[0]} {points[1]} {points[2]} {points[3]} {points[4]} {points[5]}"
            )
        elif type_ == cairo.PATH_CLOSE_PATH:
            path_data.append("Z")

    surface.finish()
    return " ".join(path_data), fill_color


def convert_text_to_paths(svg_root):
    """
    Saves text as path with original-text as an attribute.
    """

    SVG_NS = "http://www.w3.org/2000/svg"
    register_namespace('', SVG_NS)

    for text_elem in svg_root.iter(f'{{{SVG_NS}}}text'):
        x = float(text_elem.get('x', 0))
        y = float(text_elem.get('y', 0))
        text = text_elem.text
        fill = text_elem.get('fill', '#000000')

        font_family = text_elem.get('font-family', 'Sans').split(',')[0].strip("'\"") 
        font_size = float(text_elem.get('font-size', '14px').replace('px', ''))
        font_style = text_elem.get('font-style', 'normal')
        font_weight = text_elem.get('font-weight', 'normal')

        path_data, _ = render_text_to_path_cairo(
            text, x, y,
            font_family=font_family,
            font_size=font_size,
            font_style=font_style,
            font_weight=font_weight,
            fill_color=fill
        )

        path_elem = Element(f'{{{SVG_NS}}}path', {
            'd': path_data,
            'fill': fill,
            'original-text': text
        })

        parent = svg_root.find(f'.//{{{SVG_NS}}}g')
        if parent is not None:
            idx = list(parent).index(text_elem)
            parent.remove(text_elem)
            parent.insert(idx, path_elem)

    return svg_root


def convert_text(svg_path, output_path):
    with open(svg_path, 'r') as f:
        content = f.read()
        svg_root = fromstring(content)

    new_svg_root = convert_text_to_paths(svg_root)

    tree = ElementTree(new_svg_root)
    tree.write(output_path, encoding='utf-8', xml_declaration=True)


if __name__ == '__main__':
    svg_path = 'input.svg'
    output_path = 'output.svg'
    convert_text(svg_path, output_path)