Embedding Google drawings by reference
Contents:
You can embed a Google drawing in a web page by referencing it as an image.
NOTE: Set the sharing permissions on the drawing to allow anyone with the link to view the drawing; otherwise, your readers will just see a broken image.
Replace edit at the end of the drawing URL with export/png and use it as the path to your image.
For example, if the drawing URL is https://docs.google.com/drawings/d/12345/edit, use this HTML image syntax:
<img src="https://docs.google.com/drawings/d/12345/export/png"
alt="image alt text"/>You can do the same thing in Markdown:
Here's a test drawing (which just contains a photograph), shared publicly and included by reference:
You can also use the drawing markup as the link title to make the image itself a link to the drawing. For example, in Markdown, a hyperlink is:
[link-text](https://link-target-url "tooltip-text")
and an image is:
If we replace the link-text in the hyperlink markup with the image markup, the drawing itself will be a hyperlink to the target URL.
[](https://link-target-url "tooltip-text")
This is a simplified example, using a drawing as the link text and a link to edit the drawing as the target:
[]
(https://docs.google.com/drawings/d/12345/edit "Click to view/edit diagram")
Here's a rendered example (a drawing that contains both a photograph and some drawing elements). Hover over the image to view the title and click to view the drawing:
If you are publishing an HTML page or the Markdown doesn't work (the Markdown markup is very sensitive to whitespace, including where you put newlines), use HTML to create the image and the link:
<a href="https://docs.google.com/drawings/d/12345/edit"
title="Click to view/edit diagram">
<img src="https://docs.google.com/drawings/d/12345/export/png"
alt="image alt text"/></a>