Better Angels cover photos

[fabacab]

Is there something wrong with my browser or do some of these files have no contents? :/ I'm not seeing the "Call a friend, not the cops" text and a couple are totally transparent?

[pnppl]

My browser doesn't render them properly either. I'll try to clean them up a bit

[fabacab]

I wonder if maybe our computers are showing us different things. Here's what both the SVG and the exported PNG of the better angels cover facebook call a friend.svg file looks like:

The text doesn't seem to be what you intend it to be. When I export this SVG as a PNG, I get the same result. When you re-download the file from GitHub, does it look the same on your Inkscape?

I'm seeing similar issues of missing graphical elements in some of the other files, too. :\

[pnppl]

Here's how that file displays in my browser (Firefox 45.0.1, Linux):

Here's how it looks in my editor and how it looks after exporting to PNG (Inkscape, 0.91):

[fabacab]

Weeeeeeiirrrdd. I'm using the same Inkscape version but on a Mac. I found this thread about Mac OS X not rendering SVG text, and the symptoms sound similar. I'm gonna have a closer look at the SVG itself after I get some rest, since the problem very well may be the Mac OS X renderer, not the files.

[fabacab]

Okay, I figured out why your SVG text is not displaying in browsers. The TL;DR: Select the text in the image and then use the "Convert to Text" command in Inkscape's Text menu. (See this SO Q&A.)

The long story: by default, because it's awesome, Inkscape supports the W3C standard for SVG 1.2, which never made it past "Working Draft" state, so most other software doesn't completely support it. Instead, there is a new version of (SVG 2) which is also currently a Working Draft but that supports a more Web-like system for text.

In SVG1.2, text can be placed on a page by using the <flowRoot> element and its descendants, which are not supported by any browser. So when Firefox, et. al., encounters this element, they ignore it. That's what Inkscape used, see these lines of code. By selecting the text in the Inkscape editor window, and then using the "Convert to Text" command, you're telling Inkscape, "Don't use <flowRoot> for this, use <svg:text> instead." The <svg:text> element is an SVG 1.1 compliant element, and that version of the standard did make it to a W3C Recommendation, so it's much more widely supported.

So that's the mystery for why the text isn't appearing!

I'm still not entirely sure why the spacing is totally different on my machine than yours, though. Maybe if you try making this change in your source files and then committing them as <svg:text> elements it'll work better? Can we give that a shot?

[pnppl]

I did that and reuploaded, but they still look awful fucky in my browser. Some of them don't render at all.

[fabacab]

Yeah, the "Convert to Text" was clearly not the only issue, but all the text is visible for me, now, including in my browsers, so I know that was part of it. Now that I can actually see the text rendered, let me have a look and see if there's some more massaging I can do to clean things up. Thanks for working through this with me!

[fabacab]

Okay, so another part of the problem is that I didn't have the Lato fonts installed on my computer. Lato is thankfully a free and open source font family so I was able to download them from here. After I installed them, the Inkscape rendering was perfect. :)

This doesn't fix the SVG-in-browser rendering problems, which I think is also largely due to the fact that the SVG text is real text, not a path. But this is okay! Because, as you said, we're not using these SVG files as browser images, we're using them as source code that will be rasterized into PNGs for the Web anyway.

So I think this solved the problem!

Thanks so much for cleaning these up and providing the sources in beautiful, editable SVG files! This is so much better than requiring Adobe Illustrator!

[pnppl]

No problem! :)