Make .svg images work

[bmorelli25]

.svg images in our documentation do not render. It'd be nice if they did. I tested this with a fresh install of asciidoctor and they work just fine. This problem might have something to do with docbook.

[nik9000]

.png images in our documentation do not render. It'd be nice if they did. I tested this with a fresh install of asciidoctor and they work just fine. This problem might have something to do with docbook.

Could you make a change to the README.asciidoctor file that demonstrates what doesn't work? Maybe make a PR with it or attach it as a patch? I thought we had png files that we reference and they are copied.

[bmorelli25]

Oh lordy. I meant svg. Sorry, sorry, sorry, will update

[nik9000]

Do you mean SVGs defined inline? Can you make an example?

[bmorelli25]

Sure, something like this:

image::./images/node_release_schedule.svg[Node.js release schedule]

renders as:

Edit: Here's the SVG for this particular file

<svg xmlns="http://www.w3.org/2000/svg" width="960" height="500"><defs><style type="text/css"><![CDATA[ 
.current {
  fill: #2aa748;
}
.active {
  fill: #47b4ff;
}
.maintenance {
  fill: #89a19d;
}
.unstable {
  fill: #ffb800;
}
.bar-join {
  fill: #ffffff;
}
.bar-join.unstable, .bar-join.current {
  display: none;
}
.tick text {
  font: 16px sans-serif;
  fill: #89a19d;
}
.axis--y .tick text {
  text-anchor: end;
}
.label {
  fill: #fff;
  font: 20px sans-serif;
  font-weight: 100;
  text-anchor: start;
  dominant-baseline: middle;
  text-transform: uppercase;
} ]]></style></defs><g id="bar-container" transform="translate(110, 30)"><g class="axis axis--x" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><g class="tick" opacity="1" transform="translate(56.813396660627724,0)"><line stroke="#89a19d" y2="440" x1="0.5" x2="0.5"></line><text fill="#000" y="0" x="0.5" dy="-10">Apr 2019</text></g><g class="tick" opacity="1" transform="translate(144.50276648876266,0)"><line stroke="#89a19d" y2="440" x1="0.5" x2="0.5" stroke-dasharray="2,2"></line><text fill="#000" y="0" x="0.5" dy="-10">Jul 2019</text></g><g class="tick" opacity="1" transform="translate(233.15575576555844,0)"><line stroke="#89a19d" y2="440" x1="0.5" x2="0.5"></line><text fill="#000" y="0" x="0.5" dy="-10">Oct 2019</text></g><g class="tick" opacity="1" transform="translate(321.8488958527151,0)"><line stroke="#89a19d" y2="440" x1="0.5" x2="0.5" stroke-dasharray="2,2"></line><text fill="#000" y="0" x="0.5" dy="-10">Jan 2020</text></g><g class="tick" opacity="1" transform="translate(409.4981148704892,0)"><line stroke="#89a19d" y2="440" x1="0.5" x2="0.5"></line><text fill="#000" y="0" x="0.5" dy="-10">Apr 2020</text></g><g class="tick" opacity="1" transform="translate(497.18748469862413,0)"><line stroke="#89a19d" y2="440" x1="0.5" x2="0.5" stroke-dasharray="2,2"></line><text fill="#000" y="0" x="0.5" dy="-10">Jul 2020</text></g><g class="tick" opacity="1" transform="translate(585.8404739754199,0)"><line stroke="#89a19d" y2="440" x1="0.5" x2="0.5"></line><text fill="#000" y="0" x="0.5" dy="-10">Oct 2020</text></g><g class="tick" opacity="1" transform="translate(674.5336140625766,0)"><line stroke="#89a19d" y2="440" x1="0.5" x2="0.5" stroke-dasharray="2,2"></line><text fill="#000" y="0" x="0.5" dy="-10">Jan 2021</text></g><g class="tick" opacity="1" transform="translate(761.2192136316897,0)"><line stroke="#89a19d" y2="440" x1="0.5" x2="0.5"></line><text fill="#000" y="0" x="0.5" dy="-10">Apr 2021</text></g></g><g class="axis axis--y" fill="none" font-size="10" font-family="sans-serif" text-anchor="start"><g class="tick" opacity="1" transform="translate(0,34.457831325301214)"><line stroke="#e1e7e7" x2="820" y1="0.5" y2="0.5"></line><text fill="#000" x="0" y="0.5" dy="0.32em" dx="-10">Master</text></g><g class="tick" opacity="1" transform="translate(0,87.4698795180723)"><line stroke="#e1e7e7" x2="820" y1="0.5" y2="0.5"></line><text fill="#000" x="0" y="0.5" dy="0.32em" dx="-10">Node.js 6</text></g><g class="tick" opacity="1" transform="translate(0,140.4819277108434)"><line stroke="#e1e7e7" x2="820" y1="0.5" y2="0.5"></line><text fill="#000" x="0" y="0.5" dy="0.32em" dx="-10">Node.js 8</text></g><g class="tick" opacity="1" transform="translate(0,193.49397590361446)"><line stroke="#e1e7e7" x2="820" y1="0.5" y2="0.5"></line><text fill="#000" x="0" y="0.5" dy="0.32em" dx="-10">Node.js 10</text></g><g class="tick" opacity="1" transform="translate(0,246.50602409638554)"><line stroke="#e1e7e7" x2="820" y1="0.5" y2="0.5"></line><text fill="#000" x="0" y="0.5" dy="0.32em" dx="-10">Node.js 11</text></g><g class="tick" opacity="1" transform="translate(0,299.51807228915663)"><line stroke="#e1e7e7" x2="820" y1="0.5" y2="0.5"></line><text fill="#000" x="0" y="0.5" dy="0.32em" dx="-10">Node.js 12</text></g><g class="tick" opacity="1" transform="translate(0,352.5301204819277)"><line stroke="#e1e7e7" x2="820" y1="0.5" y2="0.5"></line><text fill="#000" x="0" y="0.5" dy="0.32em" dx="-10">Node.js 13</text></g><g class="tick" opacity="1" transform="translate(0,405.5421686746988)"><line stroke="#e1e7e7" x2="820" y1="0.5" y2="0.5"></line><text fill="#000" x="0" y="0.5" dy="0.32em" dx="-10">Node.js 14</text></g><line y1="440" y2="440" x2="820" stroke="#89a19d"></line></g><g><rect class="bar unstable" x="0" y="15.903614457831338" width="820" height="37.10843373493976"></rect><rect class="bar-join unstable" x="-1" y="15.903614457831338" width="2" height="37.10843373493976" style="opacity: 0;"></rect><text class="label" x="15" y="36.457831325301214" style="opacity: 1;">unstable</text></g><g><rect class="bar maintenance" x="0" y="68.91566265060243" width="84.79851148215248" height="37.10843373493976"></rect><rect class="bar-join maintenance" x="-1" y="68.91566265060243" width="2" height="37.10843373493976" style="opacity: 0;"></rect><text class="label" x="15" y="89.4698795180723" style="opacity: 0;">maintenance</text></g><g><rect class="bar maintenance" x="0" y="121.9277108433735" width="320.88527640405425" height="37.10843373493976"></rect><rect class="bar-join maintenance" x="-1" y="121.9277108433735" width="2" height="37.10843373493976" style="opacity: 0;"></rect><text class="label" x="15" y="142.4819277108434" style="opacity: 1;">maintenance</text></g><g><rect class="bar maintenance" x="409.53826568085003" y="174.93975903614458" width="351.72109876120066" height="37.10843373493976"></rect><rect class="bar-join maintenance" x="408.53826568085003" y="174.93975903614458" width="2" height="37.10843373493976" style="opacity: 1;"></rect><text class="label" x="424.53826568085003" y="195.49397590361446" style="opacity: 1;">maintenance</text></g><g><rect class="bar active" x="0" y="174.93975903614458" width="409.53826568085003" height="37.10843373493976"></rect><rect class="bar-join active" x="-1" y="174.93975903614458" width="2" height="37.10843373493976" style="opacity: 0;"></rect><text class="label" x="15" y="195.49397590361446" style="opacity: 1;">active</text></g><g><rect class="bar maintenance" x="77.08955589286589" y="227.95180722891567" width="38.544777946432944" height="37.10843373493976"></rect><rect class="bar-join maintenance" x="76.08955589286589" y="227.95180722891567" width="2" height="37.10843373493976" style="opacity: 1;"></rect><text class="label" x="92.08955589286589" y="248.50602409638554" style="opacity: 0;">maintenance</text></g><g><rect class="bar current" x="0" y="227.95180722891567" width="77.08955589286589" height="37.10843373493976"></rect><rect class="bar-join current" x="-1" y="227.95180722891567" width="2" height="37.10843373493976" style="opacity: 0;"></rect><text class="label" x="15" y="248.50602409638554" style="opacity: 0;">current</text></g><g><rect class="bar maintenance" x="761.2593644420507" y="280.96385542168673" width="58.740635557949304" height="37.10843373493976"></rect><rect class="bar-join maintenance" x="760.2593644420507" y="280.96385542168673" width="2" height="37.10843373493976" style="opacity: 1;"></rect><text class="label" x="776.2593644420507" y="301.51807228915663" style="opacity: 0;">maintenance</text></g><g><rect class="bar active" x="253.43191499779658" y="280.96385542168673" width="507.8274494442541" height="37.10843373493976"></rect><rect class="bar-join active" x="252.43191499779658" y="280.96385542168673" width="2" height="37.10843373493976" style="opacity: 1;"></rect><text class="label" x="268.4319149977966" y="301.51807228915663" style="opacity: 1;">active</text></g><g><rect class="bar current" x="78.05317534152671" y="280.96385542168673" width="175.3787396562699" height="37.10843373493976"></rect><rect class="bar-join current" x="77.05317534152671" y="280.96385542168673" width="2" height="37.10843373493976" style="opacity: 0;"></rect><text class="label" x="93.05317534152671" y="301.51807228915663" style="opacity: 1;">current</text></g><g><rect class="bar maintenance" x="427.8470352054057" y="333.9759036144578" width="40.472016843754545" height="37.10843373493976"></rect><rect class="bar-join maintenance" x="426.8470352054057" y="333.9759036144578" width="2" height="37.10843373493976" style="opacity: 1;"></rect><text class="label" x="442.8470352054057" y="354.5301204819277" style="opacity: 0;">maintenance</text></g><g><rect class="bar current" x="253.43191499779658" y="333.9759036144578" width="174.4151202076091" height="37.10843373493976"></rect><rect class="bar-join current" x="252.43191499779658" y="333.9759036144578" width="2" height="37.10843373493976" style="opacity: 0;"></rect><text class="label" x="268.4319149977966" y="354.5301204819277" style="opacity: 1;">current</text></g><g><rect class="bar active" x="604.1893943103364" y="386.9879518072289" width="215.8106056896636" height="37.10843373493976"></rect><rect class="bar-join active" x="603.1893943103364" y="386.9879518072289" width="2" height="37.10843373493976" style="opacity: 1;"></rect><text class="label" x="619.1893943103364" y="407.5421686746988" style="opacity: 1;">active</text></g><g><rect class="bar current" x="428.81065465406647" y="386.9879518072289" width="175.37873965626994" height="37.10843373493976"></rect><rect class="bar-join current" x="427.81065465406647" y="386.9879518072289" width="2" height="37.10843373493976" style="opacity: 0;"></rect><text class="label" x="443.81065465406647" y="407.5421686746988" style="opacity: 1;">current</text></g></g></svg>

[nik9000]

Oh! Yeah. There isn't any reason that shouldn't work.....

[nik9000]

I did a little digging and I understand what is up here. It looks like browsers don't always want to display svgs in img tags which is what happens when you put them in the asciidoc like you do. I suspect asciidoctor handles that somehow but our docbook process doesn't.

[bmorelli25]

Ahh, cool! Thanks for looking into it.

[dedemorton]

I'm using an .svg file here, and it renders OK on Chrome and Firefox (AFAIK): https://www.elastic.co/guide/en/beats/functionbeat/current/images/diagram-functionbeat-architecture.svg

Should I avoid using svg?

[nik9000]

If it renders then it should be fine. Could you link to the asciidoc file where you include?

[bmorelli25]

That looks to be functionbeat, which isn't yet using asciidoctor.

edit: @nik9000 it's here: https://github.com/elastic/beats/blob/7.2/x-pack/functionbeat/docs/overview.asciidoc

[watson]

I just ran into this again, and after looking that response headers, I noticed that it was serving the SVG with Content-Type: text/plain. I think if we just switched it to Content-Type: image/svg+xml it would probably fix it.