Why these codes can not show in html file

Question

I have a figure.html file, which contains the following codes:

<svg width="600" height="300" viewBox="0 0 600 300" xmlns="http://www.w3.org/2000/svg">
<text x="300" y="9" dy="0.76em" text-anchor="middle" font-family="Consolas" font-size="9.67741935483871" opacity="1" fill="#FFFFFF" font-weight="bold">
    adfdaf
</text>
<polyline fill="none" opacity="1" stroke="#FFFFFF" stroke-width="1" points="75,264 248,143 421,22 "/>
<polyline fill="none" opacity="1" stroke="#FFFFFF" stroke-width="1" points="74,22 74,264 "/>
<text x="65" y="264" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#FFFFFF">
1.00
</text>
<polyline fill="none" opacity="1" stroke="#FFFFFF" stroke-width="1" points="69,264 74,264 "/>
<text x="65" y="240" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#FFFFFF">
1.20
</text>
<polyline fill="none" opacity="1" stroke="#FFFFFF" stroke-width="1" points="69,240 74,240 "/>
<text x="65" y="216" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#FFFFFF">
1.40
</text>
<polyline fill="none" opacity="1" stroke="#FFFFFF" stroke-width="1" points="69,216 74,216 "/>
<text x="65" y="192" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#FFFFFF">
1.60
</text>
<polyline fill="none" opacity="1" stroke="#FFFFFF" stroke-width="1" points="69,192 74,192 "/>
<text x="65" y="168" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#FFFFFF">
1.80
</text>
<polyline fill="none" opacity="1" stroke="#FFFFFF" stroke-width="1" points="69,168 74,168 "/>
<text x="65" y="143" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#FFFFFF">
2.00
</text>
<polyline fill="none" opacity="1" stroke="#FFFFFF" stroke-width="1" points="69,143 74,143 "/>
<text x="65" y="119" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#FFFFFF">
2.20
</text>
<polyline fill="none" opacity="1" stroke="#FFFFFF" stroke-width="1" points="69,119 74,119 "/>
<text x="65" y="95" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#FFFFFF">
2.40
</text>
<polyline fill="none" opacity="1" stroke="#FFFFFF" stroke-width="1" points="69,95 74,95 "/>
<text x="65" y="71" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#FFFFFF">
2.60
</text>
<polyline fill="none" opacity="1" stroke="#FFFFFF" stroke-width="1" points="69,71 74,71 "/>
<text x="65" y="47" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#FFFFFF">
2.80
</text>
<polyline fill="none" opacity="1" stroke="#FFFFFF" stroke-width="1" points="69,47 74,47 "/>
<text x="65" y="22" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#FFFFFF">
3.00
</text>
<polyline fill="none" opacity="1" stroke="#FFFFFF" stroke-width="1" points="69,22 74,22 "/>
<polyline fill="none" opacity="1" stroke="#FFFFFF" stroke-width="1" points="75,265 594,265 "/>
<text x="75" y="275" dy="0.76em" text-anchor="middle" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#FFFFFF">
2020
</text>
<polyline fill="none" opacity="1" stroke="#FFFFFF" stroke-width="1" points="75,265 75,270 "/>
<text x="421" y="275" dy="0.76em" text-anchor="middle" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#FFFFFF">
0104
</text>
<polyline fill="none" opacity="1" stroke="#FFFFFF" stroke-width="1" points="421,265 421,270 "/>
</svg>

But when I open the figure.html file, it show nothing. What am I doing wrong? The file comes from my jupyter output, I copy the output and paste in the file. I don't know what is going on.

Also... the background will default to white (`#FFFFFF`) while **all** the colors for those shapes are also white (`stroke="#FFFFFF"`, `fill="#FFFFFF"`) so your browser probably is displaying it just fine - it's just that _everything_ is white. — Dai, Aug 22 '23 at 07:25
If there's no `` and `` **then it isn't a HTML file** - what you have is an SVG file, so it should be renamed to `.svg` not `.html`. — Dai, Aug 22 '23 at 07:26
"everything is white", that is the problem. After I making it to black, things works fine. Thank you very much. — dfadfdff, Aug 22 '23 at 07:30

score 0 · Answer 1 · answered Aug 22 '23 at 07:52

You have an SVG file, not a HTML file.
- But all modern browsers can display SVG files just fine (and browsers don't care about file-extensions) - but you should rename that file from .html to .svg to avoid confusing others, or yourself, in future.
Secondly, it's likely that the browser is displaying the SVG file correctly, but you just can't see anything because everything is white: you've got white-text mixed with white shapes on a white background.
- #FFFFFF is the hex-rgb color-code for rgb( 255, 255, 255 ) which is the colour white.
- SVG files default to a white background when hosted within an HTML document (though I'm unsure how browsers handle non-HTML <svg> documents, as they often still create some kind of minimal HTML document and DOM around the loaded SVG).

If you tweak your SVG to change all those #FFFFFF colors to something else then you should be able to see things - in this case, I see it's a line chart of some kind.

<svg width="600" height="300" viewBox="0 0 600 300" xmlns="http://www.w3.org/2000/svg" fill="#cccccc">
<text x="300" y="9" dy="0.76em" text-anchor="middle" font-family="Consolas" font-size="9.67741935483871" opacity="1" fill="#CCAABB" font-weight="bold">
    adfdaf
</text>
<polyline fill="none" opacity="1" stroke="#CCAABB" stroke-width="1" points="75,264 248,143 421,22 "/>
<polyline fill="none" opacity="1" stroke="#CCAABB" stroke-width="1" points="74,22 74,264 "/>
<text x="65" y="264" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#CCAABB">
1.00
</text>
<polyline fill="none" opacity="1" stroke="#CCAABB" stroke-width="1" points="69,264 74,264 "/>
<text x="65" y="240" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#CCAABB">
1.20
</text>
<polyline fill="none" opacity="1" stroke="#CCAABB" stroke-width="1" points="69,240 74,240 "/>
<text x="65" y="216" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#CCAABB">
1.40
</text>
<polyline fill="none" opacity="1" stroke="#CCAABB" stroke-width="1" points="69,216 74,216 "/>
<text x="65" y="192" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#CCAABB">
1.60
</text>
<polyline fill="none" opacity="1" stroke="#CCAABB" stroke-width="1" points="69,192 74,192 "/>
<text x="65" y="168" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#CCAABB">
1.80
</text>
<polyline fill="none" opacity="1" stroke="#CCAABB" stroke-width="1" points="69,168 74,168 "/>
<text x="65" y="143" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#CCAABB">
2.00
</text>
<polyline fill="none" opacity="1" stroke="#CCAABB" stroke-width="1" points="69,143 74,143 "/>
<text x="65" y="119" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#CCAABB">
2.20
</text>
<polyline fill="none" opacity="1" stroke="#CCAABB" stroke-width="1" points="69,119 74,119 "/>
<text x="65" y="95" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#CCAABB">
2.40
</text>
<polyline fill="none" opacity="1" stroke="#CCAABB" stroke-width="1" points="69,95 74,95 "/>
<text x="65" y="71" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#CCAABB">
2.60
</text>
<polyline fill="none" opacity="1" stroke="#CCAABB" stroke-width="1" points="69,71 74,71 "/>
<text x="65" y="47" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#CCAABB">
2.80
</text>
<polyline fill="none" opacity="1" stroke="#CCAABB" stroke-width="1" points="69,47 74,47 "/>
<text x="65" y="22" dy="0.5ex" text-anchor="end" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#CCAABB">
3.00
</text>
<polyline fill="none" opacity="1" stroke="#CCAABB" stroke-width="1" points="69,22 74,22 "/>
<polyline fill="none" opacity="1" stroke="#CCAABB" stroke-width="1" points="75,265 594,265 "/>
<text x="75" y="275" dy="0.76em" text-anchor="middle" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#CCAABB">
2020
</text>
<polyline fill="none" opacity="1" stroke="#CCAABB" stroke-width="1" points="75,265 75,270 "/>
<text x="421" y="275" dy="0.76em" text-anchor="middle" font-family="sans-serif" font-size="9.67741935483871" opacity="1" fill="#CCAABB">
0104
</text>
<polyline fill="none" opacity="1" stroke="#CCAABB" stroke-width="1" points="421,265 421,270 "/>
</svg>

If you open a file with .html extension, or load it from a server, the browser will open it as a `text/html` MIME type. The SVG content will be diplayed, but the result will not be identical to when `image/svg+xml` is used: The ` — ccprog, Aug 22 '23 at 13:04
@ccprog That behaviour is entirely up to the browser: there's no standard or spec that requries that. Instead, what you're describing is just what Chromium and Firefox do today, but it isn't how IE or other browser handled SVG and other image types in the past. — Dai, Aug 23 '23 at 20:09
What step do you think is not specified? The selection of a MIME type according to file ending? That the browser will use [different parsers](https://html.spec.whatwg.org/multipage/document-lifecycle.html#document-lifecycle) for html and xml MIME types? That the [HTML parser](https://html.spec.whatwg.org/multipage/parsing.html#parsing) will [insert](https://html.spec.whatwg.org/multipage/parsing.html#parsing-main-inbody) the ` — ccprog, Aug 23 '23 at 22:03
@ccprog I was unaware that the WHATWG had specifications for that, I stand corrected. — Dai, Aug 23 '23 at 22:21

Why these codes can not show in html file

1 Answers1