Svgmobject update with basic processing of 'text' tag #1083

iterater · 2020-05-18T12:39:32Z

Motivation

Currently,, SVGMobject doesn't support <text> tag in SVG format. The support of this tag is good for plotting diagrams, graphs, and other structures from SVG. I've faced it when trying to plot graphs rendered by graphviz.

Implementation

I've added text processing to SVGMobject using Text mobject with the following features:

scaling text using text_scale for better drawing (original font size is incorrectly small;
support of font-family translated into font parameter of Text mobject;
additional shifting up to the half of 'o' height to adjust centered placement.

Testing

Tested by drawing SVG file with a graph built by graphviz. The used file is available here.

from manimlib.imports import *

class SvgGraphScene(Scene):
    def construct(self):
        g = SVGMobject(file_name=r'd:\g.svg', stroke_width=1.0, 
            fill_opacity=0.0, text_scale=2.0)
        g.scale(3)
        self.add(g)
        self.wait(5)

The result is shown below: left - before, right - after.

Additional notes

There are parameters in <text> tag which are not supported yet (further work): text-anchor, centering and rotation in font-family etc.
It will be good to extend the logic of SVGMobject to support different stroke/fill styles for different objects. E.g. to fill the text instead of stroking. Currently, it can be done using submobjects.
It seems that SVGMobject doesn't support stroke-dasharray in <path>. Could be useful. Again, currently, it seems to be available using submobjects.

- Font family split - Shift with half 'o' height

kevkevinpal · 2020-05-18T13:39:02Z

manimlib/mobject/svg/svg_mobject.py

+        o_hight = Text('o', size=font_size*self.text_scale, font=font_family_list[0]).get_height() # vertical centering with 'o'
+        return txt_mobject.shift(UP*o_hight*0.5)


I'm getting kinda lost here so does a svg text element with the value o have incorrect vertical centering does this happen for other characters. I wonder if there is a way to do this automatically and not for the 'o' degenerate case

By default Text mobject is centered about the top of small letters (red dot below). I think the correct behavior is to use the central line of small letters (green dot).

Without a half-o height shift, the result in PR looks like this (which seems to be incorrect).

Also, I've looked at TextWithFixHeight class in text_mobject.py for reference of text height measuring.

TextWithFixHeight will create problems thats why i removed that in #1071

NavpreetDevpuri · 2020-05-18T18:53:11Z

I think we have to use cairo directly to do this.
M Trying.

NavpreetDevpuri · 2020-05-18T22:02:36Z

Look at the text background which is black colored rectangle
and the position of text is pink colored circle the mid point of that background rectangle
for now i don't know how to get that center for different-different fonts

iterater · 2020-05-18T23:56:13Z

@NavpreetDevpuri

Yes, currently, the arrangement is naturally done with whole text along the center of the rectangle (see red dots below).

The desired behavior is to arrange vertically along with the small characters of text ('o' position). To count that I propose counting extra space for each character using the original cairo function text_extents and comparing height and vertical bearing for the whole text and separate characters. So the text can be arranged as follows. Green dots - new vertical "center".

NavpreetDevpuri · 2020-05-19T01:46:43Z

I think if we store all Text elements from svg files in a list and after that just replace Text elements in svg file with cairo rendered Texts at appropriate locations according to font and style. Save this new generated svg file may be in new media folder media/svg
This seems a better approach because we don't need to rebuild text render.

But for a base your method is just fine.
We can improve it later.

NavpreetDevpuri · 2020-05-19T02:11:14Z

But svg file is still showing in wrong way.
Reset text_mobject.py
Left side is in chrome
Right side is in manim

iterater · 2020-05-19T09:23:25Z

@NavpreetDevpuri, yes, I see. The problem was in the interpretation of vertical alignment in SVG. The vertical anchor in SVG is along the baseline, not in center. Now the text placement seems to be correct:

NavpreetDevpuri · 2020-05-19T09:35:50Z

Good job!
Now implement text-anchor shift text right or left by the half of width according to 'text-anchor' and set default value for text stroke to 0 and fill the text with color.

- text horizontal alignment - fill text as stroke in main object - text without stroke by default

iterater · 2020-05-19T10:48:52Z

@NavpreetDevpuri

The horizontal alignment was updated. See below. NB The text-anchor attribute was modified manually in SVG file for "A" (text-anchor="start") and "B b" (text-anchor="end") nodes, so they are shifted. With the original file, everything is placed fine.

Stroke and fill is updated for all submobjects in base VMobject. So, new update_text_stroke_and_fill() called in __init__ was added. The default stroke is used for text color. Stroke in the text is disabled by default.

NavpreetDevpuri · 2020-05-19T22:17:46Z

I think if we store all Text elements from svg files in a list and after that just replace Text elements in svg file with cairo rendered Texts at appropriate locations according to font and style. Save this new generated svg file may be in new media folder media/svg
This seems a better approach because we don't need to rebuild text render.

But for a base your method is just fine.
We can improve it later.

as i said
a better way to use inkscape to convert svg's text to paths automatically according to font, size ..etc it handles everything.
You can try as follow
install inkscape then add C:\Program Files\Inkscape\bin; to environment variable path.
open terminal or cmd at 'g.svg' file's directory
then run following command

inkscape g.svg --export-text-to-path --export-plain-svg --export-filename=output.svg

this will create output.svg containing path tags instead of text tag.

iterater · 2020-05-20T22:05:31Z

Yes, that possibly works. But as I see there are two issues.

This requires additional external software to be used. As a general solution, that looks not so good. So I believe adding the functions proposed in this PR will be better.
In my particular case, SVGMobject fails in the processing of <path> tag both in my branch and in master with the following error: TypeError: add_cubic_bezier_curve_to() missing 2 required positional arguments: 'handle2' and 'anchor'. Here is the input SVG file. And I think it should be another issue independent of this PR. (I can create an issue here for that)

All in all, for my purpose, my update seems to be working well. See an example from my current work (sorry for text in Cyrillic):

TonyCrane · 2022-02-14T04:55:20Z

It looks like this pull request is out of date, as SVGobject has been refactored in #1731 and support for text is also in the works.
Thanks for this, but I'm closing this pull request.

iterater added 3 commits May 18, 2020 02:38

Basic support of text tag in SVG

90ad65c

Parameter for text scaling

7c44b27

Decoration

ba5ee62

- Font family split - Shift with half 'o' height

kevkevinpal reviewed May 18, 2020

View reviewed changes

NavpreetDevpuri mentioned this pull request May 18, 2020

Fixed Some bugs of code_mobject.py and Text_mobject.py #1071

Closed

Counting extra space on top and bottom

2e98ac0

Fixing text vertical anchor

b945532

Remove redundant spacing computing

28ec98a

Decoration update

59e4cc3

- text horizontal alignment - fill text as stroke in main object - text without stroke by default

eulertour pushed a commit to eulertour/manim-3b1b that referenced this pull request Mar 16, 2021

Fix shape of torus with non-default minor_radius (3b1b#1083)

8d55eb3

iterater added 2 commits October 26, 2021 22:50

Merge branch 'master' into svgmobject_update

e641cde

Fixing text dir obtaining

e4e25f1

TonyCrane closed this Feb 14, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Svgmobject update with basic processing of 'text' tag #1083

Svgmobject update with basic processing of 'text' tag #1083

iterater commented May 18, 2020

kevkevinpal May 18, 2020

iterater May 18, 2020

NavpreetDevpuri May 18, 2020

NavpreetDevpuri commented May 18, 2020

NavpreetDevpuri commented May 18, 2020 •

edited

Loading

iterater commented May 18, 2020 •

edited

Loading

NavpreetDevpuri commented May 19, 2020 •

edited

Loading

NavpreetDevpuri commented May 19, 2020 •

edited

Loading

iterater commented May 19, 2020

NavpreetDevpuri commented May 19, 2020

iterater commented May 19, 2020 •

edited

Loading

NavpreetDevpuri commented May 19, 2020 •

edited

Loading

iterater commented May 20, 2020

TonyCrane commented Feb 14, 2022

		o_hight = Text('o', size=font_size*self.text_scale, font=font_family_list[0]).get_height() # vertical centering with 'o'
		return txt_mobject.shift(UPo_hight0.5)

Svgmobject update with basic processing of 'text' tag #1083

Svgmobject update with basic processing of 'text' tag #1083

Conversation

iterater commented May 18, 2020

Motivation

Implementation

Testing

Additional notes

kevkevinpal May 18, 2020

Choose a reason for hiding this comment

iterater May 18, 2020

Choose a reason for hiding this comment

NavpreetDevpuri May 18, 2020

Choose a reason for hiding this comment

NavpreetDevpuri commented May 18, 2020

NavpreetDevpuri commented May 18, 2020 • edited Loading

iterater commented May 18, 2020 • edited Loading

NavpreetDevpuri commented May 19, 2020 • edited Loading

NavpreetDevpuri commented May 19, 2020 • edited Loading

iterater commented May 19, 2020

NavpreetDevpuri commented May 19, 2020

iterater commented May 19, 2020 • edited Loading

NavpreetDevpuri commented May 19, 2020 • edited Loading

iterater commented May 20, 2020

TonyCrane commented Feb 14, 2022

NavpreetDevpuri commented May 18, 2020 •

edited

Loading

iterater commented May 18, 2020 •

edited

Loading

NavpreetDevpuri commented May 19, 2020 •

edited

Loading

NavpreetDevpuri commented May 19, 2020 •

edited

Loading

iterater commented May 19, 2020 •

edited

Loading

NavpreetDevpuri commented May 19, 2020 •

edited

Loading