Skip to content

Instantly share code, notes, and snippets.

@stuaxo

stuaxo/cairo-svg-how-to-fill-and-stroke.ipynb

Last active March 24, 2021 01:26
Show Gist options
  • Save stuaxo/b525a47d33f5f3074b1be7c693f6b6e6 to your computer and use it in GitHub Desktop.
Save stuaxo/b525a47d33f5f3074b1be7c693f6b6e6 to your computer and use it in GitHub Desktop.
Download ZIP
OPERATOR_SOURCE and OPERATOR_CLEAR create images in SVGs
Display the source blob
Display the rendered blob
Raw
cairo-svg-how-to-fill-and-stroke.ipynb
{
"cells": [
{
"cell_type": "code",
"execution_count": 1,
"metadata": {},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"fill_and_stroke.png\n"
]
},
{
"data": {
"image/png": "iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAABmJLR0QA/wD/AP+gvaeTAAABOUlEQVR4nO3dMQ6CQBQA0cV4b5aTY21jLCTA+F5HQj4bJr+gYgwALmp5v9znKaf4e8s8avLjqMFcg8BxAscJHCdwnMBxz29vXMe2HnmQum2s2xnPtcFxAscJHCdwnMBxAsd9/Zn0yRzzF2Nu74rvwQbHCRwncJzAcQLHCRwncJzAcQLHCRwncJzAcQLHCRwncJzAcQLHCRwncJzAcQLHCRwncJzAcQLHCRwncJzAcQLHCRwncJzAcQLHCRwncJzAcQLHCRwncJzAcQLHCRwncJzAcQLHCRwncJzAcQLHCRwncJzAcQLHCRwncJzAcQLHCRwncJzAcQLHCRwncJzAcQLH+QN4nA2OEzhO4DiB4wSOEzhueb/c5ymn+HvLPGqyDY4TOE7gOIHjBI4TGAAAAAAAAAAAAAC4uxczkwrB5y7J8gAAAABJRU5ErkJggg==\n",
"text/plain": [
"<IPython.core.display.Image object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"name": "stdout",
"output_type": "stream",
"text": [
"SVG\n"
]
},
{
"data": {
"image/svg+xml": [
"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"120pt\" height=\"120pt\" viewBox=\"0 0 120 120\" version=\"1.1\">\n",
"<g id=\"surface1\">\n",
"<path style=\"fill-rule:nonzero;fill:rgb(100%,0%,0%);fill-opacity:1;stroke-width:14;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,100%);stroke-opacity:0.5;stroke-miterlimit:10;\" d=\"M 10 10 L 90 10 L 90 90 L 10 90 Z M 10 10 \"/>\n",
"</g>\n",
"</svg>"
],
"text/plain": [
"<IPython.core.display.SVG object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
"\n",
" <div class=a86f2cf7d-1fd0-4513-815a-5ea39d781038> \n",
" <style>\n",
" div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .hll { background-color: #ffffcc }\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .c { color: #aaaaaa; font-style: italic } /* Comment */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .err { color: #FF0000; background-color: #FFAAAA } /* Error */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .k { color: #0000aa } /* Keyword */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .ch { color: #aaaaaa; font-style: italic } /* Comment.Hashbang */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .cm { color: #aaaaaa; font-style: italic } /* Comment.Multiline */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .cp { color: #4c8317 } /* Comment.Preproc */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .cpf { color: #aaaaaa; font-style: italic } /* Comment.PreprocFile */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .c1 { color: #aaaaaa; font-style: italic } /* Comment.Single */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .cs { color: #0000aa; font-style: italic } /* Comment.Special */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .gd { color: #aa0000 } /* Generic.Deleted */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .ge { font-style: italic } /* Generic.Emph */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .gr { color: #aa0000 } /* Generic.Error */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .gh { color: #000080; font-weight: bold } /* Generic.Heading */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .gi { color: #00aa00 } /* Generic.Inserted */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .go { color: #888888 } /* Generic.Output */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .gp { color: #555555 } /* Generic.Prompt */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .gs { font-weight: bold } /* Generic.Strong */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .gu { color: #800080; font-weight: bold } /* Generic.Subheading */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .gt { color: #aa0000 } /* Generic.Traceback */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .kc { color: #0000aa } /* Keyword.Constant */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .kd { color: #0000aa } /* Keyword.Declaration */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .kn { color: #0000aa } /* Keyword.Namespace */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .kp { color: #0000aa } /* Keyword.Pseudo */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .kr { color: #0000aa } /* Keyword.Reserved */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .kt { color: #00aaaa } /* Keyword.Type */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .m { color: #009999 } /* Literal.Number */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .s { color: #aa5500 } /* Literal.String */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .na { color: #1e90ff } /* Name.Attribute */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .nb { color: #00aaaa } /* Name.Builtin */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .nc { color: #00aa00; text-decoration: underline } /* Name.Class */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .no { color: #aa0000 } /* Name.Constant */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .nd { color: #888888 } /* Name.Decorator */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .ni { color: #880000; font-weight: bold } /* Name.Entity */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .nf { color: #00aa00 } /* Name.Function */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .nn { color: #00aaaa; text-decoration: underline } /* Name.Namespace */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .nt { color: #1e90ff; font-weight: bold } /* Name.Tag */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .nv { color: #aa0000 } /* Name.Variable */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .ow { color: #0000aa } /* Operator.Word */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .w { color: #bbbbbb } /* Text.Whitespace */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .mb { color: #009999 } /* Literal.Number.Bin */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .mf { color: #009999 } /* Literal.Number.Float */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .mh { color: #009999 } /* Literal.Number.Hex */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .mi { color: #009999 } /* Literal.Number.Integer */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .mo { color: #009999 } /* Literal.Number.Oct */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .sa { color: #aa5500 } /* Literal.String.Affix */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .sb { color: #aa5500 } /* Literal.String.Backtick */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .sc { color: #aa5500 } /* Literal.String.Char */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .dl { color: #aa5500 } /* Literal.String.Delimiter */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .sd { color: #aa5500 } /* Literal.String.Doc */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .s2 { color: #aa5500 } /* Literal.String.Double */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .se { color: #aa5500 } /* Literal.String.Escape */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .sh { color: #aa5500 } /* Literal.String.Heredoc */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .si { color: #aa5500 } /* Literal.String.Interpol */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .sx { color: #aa5500 } /* Literal.String.Other */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .sr { color: #009999 } /* Literal.String.Regex */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .s1 { color: #aa5500 } /* Literal.String.Single */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .ss { color: #0000aa } /* Literal.String.Symbol */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .bp { color: #00aaaa } /* Name.Builtin.Pseudo */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .fm { color: #00aa00 } /* Name.Function.Magic */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .vc { color: #aa0000 } /* Name.Variable.Class */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .vg { color: #aa0000 } /* Name.Variable.Global */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .vi { color: #aa0000 } /* Name.Variable.Instance */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .vm { color: #aa0000 } /* Name.Variable.Magic */\n",
"div.a86f2cf7d-1fd0-4513-815a-5ea39d781038 .il { color: #009999 } /* Literal.Number.Integer.Long */\n",
" </style>\n",
" <div class=\"highlight\"><pre><span></span><span class=\"nt\">&lt;svg</span> <span class=\"na\">xmlns=</span><span class=\"s\">&quot;http://www.w3.org/2000/svg&quot;</span> <span class=\"na\">xmlns:xlink=</span><span class=\"s\">&quot;http://www.w3.org/1999/xlink&quot;</span> <span class=\"na\">width=</span><span class=\"s\">&quot;120pt&quot;</span> <span class=\"na\">height=</span><span class=\"s\">&quot;120pt&quot;</span> <span class=\"na\">viewBox=</span><span class=\"s\">&quot;0 0 120 120&quot;</span> <span class=\"na\">version=</span><span class=\"s\">&quot;1.1&quot;</span><span class=\"nt\">&gt;</span>\n",
" <span class=\"nt\">&lt;g</span> <span class=\"na\">id=</span><span class=\"s\">&quot;surface1&quot;</span><span class=\"nt\">&gt;</span>\n",
" <span class=\"nt\">&lt;path</span> <span class=\"na\">style=</span><span class=\"s\">&quot;fill-rule:nonzero;fill:rgb(100%,0%,0%);fill-opacity:1;stroke-width:14;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,100%);stroke-opacity:0.5;stroke-miterlimit:10;&quot;</span> <span class=\"na\">d=</span><span class=\"s\">&quot;M 10 10 L 90 10 L 90 90 L 10 90 Z M 10 10 &quot;</span><span class=\"nt\">/&gt;</span>\n",
" <span class=\"nt\">&lt;/g&gt;</span>\n",
"<span class=\"nt\">&lt;/svg&gt;</span>\n",
"</pre></div>\n",
"\n",
" </div>\n",
" "
],
"text/plain": [
"<display_xml.xml.XML at 0x7f48d62d1f70>"
]
},
"execution_count": 1,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"# Initial render - can see fill under the stroke.\n",
"import cairo\n",
"import io\n",
"\n",
"from IPython.display import Image, SVG\n",
"from display_xml import XML\n",
"\n",
"svgio = io.BytesIO()\n",
"\n",
"surface = cairo.SVGSurface(svgio, 120, 120)\n",
"\n",
"cr = cairo.Context(surface)\n",
"\n",
"cr.set_source_rgb(1, 0, 0)\n",
"cr.rectangle(10, 10, 80, 80)\n",
"cr.fill_preserve()\n",
"\n",
"cr.set_line_width(14)\n",
"cr.set_source_rgba(0, 0, 1, .5)\n",
"cr.stroke()\n",
"\n",
"surface.write_to_png('fill_and_stroke.png')\n",
"\n",
"\n",
"surface.flush()\n",
"surface.finish()\n",
"\n",
"print(\"fill_and_stroke.png\")\n",
"display(Image('fill_and_stroke.png'))\n",
"print(\"SVG\")\n",
"display(SVG(data=svgio.getvalue()))\n",
"XML(svgio.getvalue(), style='autumn')"
]
},
{
"cell_type": "code",
"execution_count": 2,
"metadata": {},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"fill_and_stroke.png\n"
]
},
{
"data": {
"image/png": "iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAABmJLR0QA/wD/AP+gvaeTAAABKElEQVR4nO3dMQ7CMBAAQRvxb8LLk4IK6kRJlpnOzemk1dUeA4CLmt/PdTlli783l6MmP44azDUIHCdwnMBxAscJHCdwnMBxAscJHCdwnMBxAsc99xiyjvnaY87dzbG+z97hlwuOEzhO4DiB4wSOEzhO4DiB4wSOEzhO4DiB4wSOEzhO4DiB4wSOEzhO4DiB4wSOEzhO4DiB4wSOEzhO4DiB4wSOEzhO4DiB4wSOEzhO4DiB4wSOEzhO4DiB4wSOEzhO4DiB4wSOEzhO4DiB4wSOEzhO4DiB4wSOEzhO4DiB4wSOEzhO4DiB4wSOEzhO4DiB4wSO2+UH8Cv+fM2HC44TOE7gOIHjBI4TOE7gOIHjBI4TOE7gOIHjBAYAAAAAAAAAAAAA7m4DxXwHQaYi2mUAAAAASUVORK5CYII=\n",
"text/plain": [
"<IPython.core.display.Image object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"name": "stdout",
"output_type": "stream",
"text": [
"SVG\n"
]
},
{
"data": {
"image/svg+xml": [
"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"120pt\" height=\"120pt\" viewBox=\"0 0 120 120\" version=\"1.1\">\n",
"<defs>\n",
"<image id=\"image12\" width=\"501\" height=\"501\" xlink:href=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfUAAAH1CAYAAADvSGcRAAAABmJLR0QA/wD/AP+gvaeTAAAHtUlEQVR4nO3YsW0UURSG0TvWSkZkhgJwGc7Qinbog0ooA5E6JySG0KGFnYwDYgLDivF8e05+pT96n/RmAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD4V8vzT9Z3M3N96iEA7N63meVu6xHn7PAXN9czczzxDgD27+fMiPqGLrYeAACchqgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQMRh6wEv1eu5v7iZ26utdwD7ts6yfp3j3dY7OA+i/gc3c3v1ZT583HoHsG8Pc/n4an592noH58H3OwBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AEQcth7wUq2zrA9z+bj1DmDfvCP8T8vzT9b3M3M8+RIA9u7zzPJ96xHnzPc7AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARCzPP1nfzMzbky8BYO9+zCz3W48AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAfnsCTPYgPkf3nmYAAAAASUVORK5CYII=\"/>\n",
"</defs>\n",
"<g id=\"surface7\">\n",
"<use xlink:href=\"#image12\" transform=\"matrix(0.24,0,0,0.24,0,0)\"/>\n",
"</g>\n",
"</svg>"
],
"text/plain": [
"<IPython.core.display.SVG object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"text/html": [
"\n",
" <div class=a501c3862-9826-4e45-9ad4-997760f627d8> \n",
" <style>\n",
" div.a501c3862-9826-4e45-9ad4-997760f627d8 .hll { background-color: #ffffcc }\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .c { color: #aaaaaa; font-style: italic } /* Comment */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .err { color: #FF0000; background-color: #FFAAAA } /* Error */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .k { color: #0000aa } /* Keyword */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .ch { color: #aaaaaa; font-style: italic } /* Comment.Hashbang */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .cm { color: #aaaaaa; font-style: italic } /* Comment.Multiline */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .cp { color: #4c8317 } /* Comment.Preproc */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .cpf { color: #aaaaaa; font-style: italic } /* Comment.PreprocFile */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .c1 { color: #aaaaaa; font-style: italic } /* Comment.Single */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .cs { color: #0000aa; font-style: italic } /* Comment.Special */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .gd { color: #aa0000 } /* Generic.Deleted */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .ge { font-style: italic } /* Generic.Emph */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .gr { color: #aa0000 } /* Generic.Error */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .gh { color: #000080; font-weight: bold } /* Generic.Heading */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .gi { color: #00aa00 } /* Generic.Inserted */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .go { color: #888888 } /* Generic.Output */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .gp { color: #555555 } /* Generic.Prompt */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .gs { font-weight: bold } /* Generic.Strong */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .gu { color: #800080; font-weight: bold } /* Generic.Subheading */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .gt { color: #aa0000 } /* Generic.Traceback */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .kc { color: #0000aa } /* Keyword.Constant */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .kd { color: #0000aa } /* Keyword.Declaration */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .kn { color: #0000aa } /* Keyword.Namespace */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .kp { color: #0000aa } /* Keyword.Pseudo */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .kr { color: #0000aa } /* Keyword.Reserved */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .kt { color: #00aaaa } /* Keyword.Type */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .m { color: #009999 } /* Literal.Number */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .s { color: #aa5500 } /* Literal.String */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .na { color: #1e90ff } /* Name.Attribute */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .nb { color: #00aaaa } /* Name.Builtin */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .nc { color: #00aa00; text-decoration: underline } /* Name.Class */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .no { color: #aa0000 } /* Name.Constant */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .nd { color: #888888 } /* Name.Decorator */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .ni { color: #880000; font-weight: bold } /* Name.Entity */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .nf { color: #00aa00 } /* Name.Function */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .nn { color: #00aaaa; text-decoration: underline } /* Name.Namespace */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .nt { color: #1e90ff; font-weight: bold } /* Name.Tag */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .nv { color: #aa0000 } /* Name.Variable */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .ow { color: #0000aa } /* Operator.Word */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .w { color: #bbbbbb } /* Text.Whitespace */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .mb { color: #009999 } /* Literal.Number.Bin */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .mf { color: #009999 } /* Literal.Number.Float */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .mh { color: #009999 } /* Literal.Number.Hex */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .mi { color: #009999 } /* Literal.Number.Integer */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .mo { color: #009999 } /* Literal.Number.Oct */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .sa { color: #aa5500 } /* Literal.String.Affix */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .sb { color: #aa5500 } /* Literal.String.Backtick */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .sc { color: #aa5500 } /* Literal.String.Char */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .dl { color: #aa5500 } /* Literal.String.Delimiter */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .sd { color: #aa5500 } /* Literal.String.Doc */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .s2 { color: #aa5500 } /* Literal.String.Double */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .se { color: #aa5500 } /* Literal.String.Escape */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .sh { color: #aa5500 } /* Literal.String.Heredoc */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .si { color: #aa5500 } /* Literal.String.Interpol */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .sx { color: #aa5500 } /* Literal.String.Other */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .sr { color: #009999 } /* Literal.String.Regex */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .s1 { color: #aa5500 } /* Literal.String.Single */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .ss { color: #0000aa } /* Literal.String.Symbol */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .bp { color: #00aaaa } /* Name.Builtin.Pseudo */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .fm { color: #00aa00 } /* Name.Function.Magic */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .vc { color: #aa0000 } /* Name.Variable.Class */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .vg { color: #aa0000 } /* Name.Variable.Global */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .vi { color: #aa0000 } /* Name.Variable.Instance */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .vm { color: #aa0000 } /* Name.Variable.Magic */\n",
"div.a501c3862-9826-4e45-9ad4-997760f627d8 .il { color: #009999 } /* Literal.Number.Integer.Long */\n",
" </style>\n",
" <div class=\"highlight\"><pre><span></span><span class=\"nt\">&lt;svg</span> <span class=\"na\">xmlns=</span><span class=\"s\">&quot;http://www.w3.org/2000/svg&quot;</span> <span class=\"na\">xmlns:xlink=</span><span class=\"s\">&quot;http://www.w3.org/1999/xlink&quot;</span> <span class=\"na\">width=</span><span class=\"s\">&quot;120pt&quot;</span> <span class=\"na\">height=</span><span class=\"s\">&quot;120pt&quot;</span> <span class=\"na\">viewBox=</span><span class=\"s\">&quot;0 0 120 120&quot;</span> <span class=\"na\">version=</span><span class=\"s\">&quot;1.1&quot;</span><span class=\"nt\">&gt;</span>\n",
" <span class=\"nt\">&lt;defs&gt;</span>\n",
" <span class=\"nt\">&lt;image</span> <span class=\"na\">id=</span><span class=\"s\">&quot;image12&quot;</span> <span class=\"na\">width=</span><span class=\"s\">&quot;501&quot;</span> <span class=\"na\">height=</span><span class=\"s\">&quot;501&quot;</span> <span class=\"na\">xlink:href=</span><span class=\"s\">&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfUAAAH1CAYAAADvSGcRAAAABmJLR0QA/wD/AP+gvaeTAAAHtUlEQVR4nO3YsW0UURSG0TvWSkZkhgJwGc7Qinbog0ooA5E6JySG0KGFnYwDYgLDivF8e05+pT96n/RmAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD4V8vzT9Z3M3N96iEA7N63meVu6xHn7PAXN9czczzxDgD27+fMiPqGLrYeAACchqgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQISoA0CEqANAhKgDQMRh6wEv1eu5v7iZ26utdwD7ts6yfp3j3dY7OA+i/gc3c3v1ZT583HoHsG8Pc/n4an592noH58H3OwBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AEQcth7wUq2zrA9z+bj1DmDfvCP8T8vzT9b3M3M8+RIA9u7zzPJ96xHnzPc7AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARIg6AESIOgBEiDoARCzPP1nfzMzbky8BYO9+zCz3W48AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAfnsCTPYgPkf3nmYAAAAASUVORK5CYII=&quot;</span><span class=\"nt\">/&gt;</span>\n",
" <span class=\"nt\">&lt;/defs&gt;</span>\n",
" <span class=\"nt\">&lt;g</span> <span class=\"na\">id=</span><span class=\"s\">&quot;surface7&quot;</span><span class=\"nt\">&gt;</span>\n",
" <span class=\"nt\">&lt;use</span> <span class=\"na\">xlink:href=</span><span class=\"s\">&quot;#image12&quot;</span> <span class=\"na\">transform=</span><span class=\"s\">&quot;matrix(0.24,0,0,0.24,0,0)&quot;</span><span class=\"nt\">/&gt;</span>\n",
" <span class=\"nt\">&lt;/g&gt;</span>\n",
"<span class=\"nt\">&lt;/svg&gt;</span>\n",
"</pre></div>\n",
"\n",
" </div>\n",
" "
],
"text/plain": [
"<display_xml.xml.XML at 0x7f48e44b2040>"
]
},
"execution_count": 2,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"# Adding OPERATOR_SOURCE or OPERATOR_CLEAR renders correctly, but creates an images inside the SVG.\n",
"svgio.seek(0)\n",
"\n",
"surface = cairo.SVGSurface(svgio, 120, 120)\n",
"\n",
"cr = cairo.Context(surface)\n",
"\n",
"cr.set_source_rgb(1, 0, 0)\n",
"cr.rectangle(10, 10, 80, 80)\n",
"cr.fill_preserve()\n",
"\n",
"cr.set_operator(cairo.Operator.SOURCE)\n",
"\n",
"cr.set_line_width(14)\n",
"cr.set_source_rgba(0, 0, 1, .5)\n",
"cr.stroke()\n",
"\n",
"\n",
"surface.write_to_png('fill_and_stroke.png')\n",
"\n",
"\n",
"surface.flush()\n",
"surface.finish()\n",
"\n",
"print(\"fill_and_stroke.png\")\n",
"display(Image('fill_and_stroke.png'))\n",
"print(\"SVG\")\n",
"display(SVG(data=svgio.getvalue()))\n",
"XML(svgio.getvalue(), style='autumn')"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.8.5"
}
},
"nbformat": 4,
"nbformat_minor": 1
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment