Repository: flutter
Issue: [flutter_svg] Text Support
Labels: package,team-engine,p: flutter_svg

_Imported from https://github.com/dnfield/flutter_svg/issues/7_

Original report by @dnfield on May 3, 2018

Basic text support is achievable:

- [x] Basic support for rendering text with a fill property (or, if text only has stroke property, treating the stroke as a fill)
- [x] Support the x, y (single value), dx and dy properties
- [x] Support nested tspans with various styles
- [x] Support font inheritence properties

These might be achievable as-is but not clear on their value here:

- [ ] Multi-value x/y lists - but is this really a desired functionality?
- [ ] The rotate property - really necessary though? Would likely require lots of canvas manipulation.  Not easy to implement.

These would require engine level changes/patches:

- [ ] `<textPath>` support - Flutter only supports drawing text in a straight line today.  Issue opened for that to discuss in flutter/flutter
- [x] Stroke text. (See https://github.com/flutter/engine/pull/5395)
- [x] Otherwise painted text. (see https://github.com/flutter/engine/pull/5395)
- [ ] Custom kerning - probably not a good idea here.

All of that said, it may be preferable to preprocess text into paths with another tool.

---
Comment by @dnfield on Jun 26, 2018
x/y and dx/dy are very non-trivial to implement.  I may revisit if inspiration hits (or if someone else wants to try they're welcome), but unless I see some need for it I'll likely focus on other areas.

I do still think textPath would be nice to have, but will require an update to Engine to achieve.

---
Comment by @Tyxz on Apr 16, 2019
I know svg text is still under development, but I miss a point on your todo list: colored text.
For my night theme I tried to change to color to the normal text color. The svg circle gets colored, but the text stays black.

```Dart
SvgPicture.asset(
      S.of(context).asset_circle_text,
      color: Theme.of(context)
               .primaryTextTheme
               .display1
               .color,
)
```
![Black text with white circle](https://user-images.githubusercontent.com/7293989/56241722-de277700-6096-11e9-8083-2953fee335ca.png)

Besides that, great work. I did not find a way to bend the text like that directly with Flutter, but thanks to you it looks very nice in the day theme.


---
Comment by @dnfield on Apr 16, 2019
What happens if you do `BlendMode.screen` for the blending?

---
Comment by @Tyxz on Apr 17, 2019
Sadly, still no difference. It could be unrelated to your library and due to the way my SVG is build. I created it with Illustrator and minified it with the svgcleaner app and the result looks like this:
```SVG
<svg viewBox="0 0 1009.36 1009.36" xmlns="http://www.w3.org/2000/svg">
  <circle cx="504.68" cy="504.68" fill="none" r="425" stroke="#000" stroke-miterlimit="10" stroke-width="3"/>
  <g font-family="Roboto-Regular, Roboto">
    <text font-size="58.085369" transform="matrix(.48 -.88 .88 .48 96.51 302.45)">A</text>
    <text font-size="58.085369" transform="matrix(.55 -.84 .84 .55 114.47 269.91)">n</text>
    <text font-size="58.085369" transform="matrix(.59 -.81 .81 .59 131.81 243.62)">t</text>
    <text font-size="58.085369" transform="matrix(.62 -.78 .78 .62 142.87 228.61)">i</text>
    <text font-size="58.085369" transform="matrix(.66 -.75 .75 .66 151.13 217.81)">c</text>
    <text font-size="58.085369" transform="matrix(.69 -.72 .72 .69 170.93 195.34)">i</text>
    <text font-size="58.085369" transform="matrix(.73 -.69 .69 .73 180.15 185.35)">p</text>
    <text font-size="58.085369" transform="matrix(.77 -.64 .64 .77 203.33 163.4)">a</text>
    <text font-size="58.085369" transform="matrix(.8 -.59 .59 .8 227.4 143.74)">t</text>
    <text font-size="58.085369" transform="matrix(.83 -.56 .56 .83 242.4 132.73)">i</text>
    <text font-size="58.085369" transform="matrix(.85 -.52 .52 .85 253.46 124.85)">o</text>
    <text font-size="58.085369" transform="matrix(.89 -.46 .46 .89 281.14 107.92)">n</text>
  </g>
</svg>
```

EDIT: Interesting enough, if I add a ```fill="white"``` to the  ```<g>``` element, and set the blend mode to screen, the text gets painted black, independend of the set color in the SvgPicture.

---
Comment by @mtc-jed on Apr 11, 2022
Hi, just adding this to the pile of stuff : the font-family "Tahoma" isn't taken into account.
Is this because Tahoma isn't supported ? If so, how can I add it to the font list ?

<details>
<summary>SVG code</summary>

```svg

  <svg viewBox="0 0 24 24">
    <circle
      cx="12"
      cy="12"
      r="11"
      style="fill:none;stroke:#757575;stroke-width:2"
    />
    <text
      x="5.9619141"
      y="18.561035"
      font-size="18px"
      font-weight="bold"
      font-family="Tahoma"
      fill="#757575"
    >1</text>
  </svg>

```

</details>

---
Comment by @dnfield on Apr 11, 2022
The font family attribute is supported, but the font must be available on the user device to use it.