4 ms·

I agree completely, but I've tried many times to figure out how to do that, and I've had no luck. I don't have any front-end skillz. If you can tell me how to

I agree completely, but I've tried many times to figure out how to do that, and I've had no luck. I don't have any front-end skillz. If you can tell me how to do it, I'd be grateful. Thanks.

tzs 5y ago
I don't know how you would put some text in an SVG, but if you are OK with linking to an HTML page instead of directly to an SVG maybe just make an HTML page that has a line of text saying that one might need to zoom out or scroll to see the large image below, a line break or paragraph break, and then an image tag referring to the SVG?
- ColinWright 4y ago
  Working on it ... I have a couple of options, neither perfect, both require some time, but I may be able to do something. Thanks.
  - tzs 4y ago
    If you can run a post-processing step on the SVG file before putting it on the server, the following might work. I took a look at the SVG, and although I don't know anything about SVG other than it is an XML format it looks pretty easy to add some text at a given location. The white background seems to come from this: <polygon fill="white" stroke="transparent" points="-4,4 -4,-11651.5 3898,-11651.5 3898,4 -4,4"/> We just need to find that in the SVG, look at the points defining the rectangle, find the left side and the top side from that list of points, then add some text. The left side is the minimum first coordinate in the set of points and the top is the minimum second coordinate in the set of points. That's -4 and -11651.5 in this case. Then we just need to add text there: <text text-anchor="left" x="-4" y="-11637.5" font-family="Times,serif" font-size="14.00">Hello, World!</text> Using the left side for x seems fine. For y using the top results in clipped text because apparently the y for text is the baseline. I don't know how font sizes work in SVG, but it looks like moving the base line down by font-size works nicely. Here's a little Perl script that can be used as a filter that takes your SVG and adds that text line, finding the top and left by looking at the points list in the first polygon line that has fill set to "white" and stroke set to "transparent". #!/usr/bin/env perl use strict; my $left = 0; my $top = 0; while (<>) { print; if (m{<polygon.*fill="white"} && m{stroke="transparent"} && m{points="(.*?)"}) { my @points = split /\s+/, $1; foreach (@points) { my($x, $y) = split /,/; $left = $x if $x < $left; $top = $y if $y < $top; } $top += 14; print qq{<text text-anchor="left" x="$left" y="$top" font-family="Times,serif" font-size="14.00">Hello, World!</text>\n}; last; } } print while (<>);
    - ColinWright 4y ago
      Yeah, I've done the post-processing SVG version and it works fine, until the chart itself does have a node near the top left, and then things overlap. So I need to test whether they will overlap, and suddenly it's a bag-o-nails. Or at the least, need to test if something is up there and not both including the extra, but that's ... inelegant. The option of having an HTML template and including the SVG will work, and that's the one I'm probably going to go with. It needs tweaking.
      - tzs 4y ago
        Another way to save the post-processing approach that would probably be easier than testing for something already up there would be to lower the top coordinate of the polygon of the white background by subtracting font-size. That would give you some new space on top for the text that should be free of anything else. (Probably need slightly more than font-size, in case parts of some characters descend below the baseline).
        ColinWright 4y ago
        Something to experiment with ... I hope to have time in a few days. Thanks.

I agree completely, but I've tried many times to figure out how to do that, and I've had no luck. I don't have any front-end skillz. If you can tell me how to do it, I'd be grateful. Thanks.

tzs 5y ago

I don't know how you would put some text in an SVG, but if you are OK with linking to an HTML page instead of directly to an SVG maybe just make an HTML page that has a line of text saying that one might need to zoom out or scroll to see the large image below, a line break or paragraph break, and then an image tag referring to the SVG?

ColinWright 4y ago
Working on it ... I have a couple of options, neither perfect, both require some time, but I may be able to do something. Thanks.
- tzs 4y ago
  If you can run a post-processing step on the SVG file before putting it on the server, the following might work. I took a look at the SVG, and although I don't know anything about SVG other than it is an XML format it looks pretty easy to add some text at a given location. The white background seems to come from this: <polygon fill="white" stroke="transparent" points="-4,4 -4,-11651.5 3898,-11651.5 3898,4 -4,4"/> We just need to find that in the SVG, look at the points defining the rectangle, find the left side and the top side from that list of points, then add some text. The left side is the minimum first coordinate in the set of points and the top is the minimum second coordinate in the set of points. That's -4 and -11651.5 in this case. Then we just need to add text there: <text text-anchor="left" x="-4" y="-11637.5" font-family="Times,serif" font-size="14.00">Hello, World!</text> Using the left side for x seems fine. For y using the top results in clipped text because apparently the y for text is the baseline. I don't know how font sizes work in SVG, but it looks like moving the base line down by font-size works nicely. Here's a little Perl script that can be used as a filter that takes your SVG and adds that text line, finding the top and left by looking at the points list in the first polygon line that has fill set to "white" and stroke set to "transparent". #!/usr/bin/env perl use strict; my $left = 0; my $top = 0; while (<>) { print; if (m{<polygon.*fill="white"} && m{stroke="transparent"} && m{points="(.*?)"}) { my @points = split /\s+/, $1; foreach (@points) { my($x, $y) = split /,/; $left = $x if $x < $left; $top = $y if $y < $top; } $top += 14; print qq{<text text-anchor="left" x="$left" y="$top" font-family="Times,serif" font-size="14.00">Hello, World!</text>\n}; last; } } print while (<>);
  - ColinWright 4y ago
    Yeah, I've done the post-processing SVG version and it works fine, until the chart itself does have a node near the top left, and then things overlap. So I need to test whether they will overlap, and suddenly it's a bag-o-nails. Or at the least, need to test if something is up there and not both including the extra, but that's ... inelegant. The option of having an HTML template and including the SVG will work, and that's the one I'm probably going to go with. It needs tweaking.
    - tzs 4y ago
      Another way to save the post-processing approach that would probably be easier than testing for something already up there would be to lower the top coordinate of the polygon of the white background by subtracting font-size. That would give you some new space on top for the text that should be free of anything else. (Probably need slightly more than font-size, in case parts of some characters descend below the baseline).
      - ColinWright 4y ago
        Something to experiment with ... I hope to have time in a few days. Thanks.