🤖 Cannot save fiddle -- it was when I added the 3rd SVG element (tux), it refuses to save #2328
Description
Error code
ERRW:SS1.0
Were you logged in?
Yes
Your username (if logged in)
smrxxx
Your HTML
<div class="logo-row">
<svg fill="#000000" width="100px" height="100px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M18.71 19.5C17.88 20.74 17 21.95 15.66 21.97C14.32 22 13.89 21.18 12.37 21.18C10.84 21.18 10.37 21.95 9.09997 22C7.78997 22.05 6.79997 20.68 5.95997 19.47C4.24997 17 2.93997 12.45 4.69997 9.39C5.56997 7.87 7.12997 6.91 8.81997 6.88C10.1 6.86 11.32 7.75 12.11 7.75C12.89 7.75 14.37 6.68 15.92 6.84C16.57 6.87 18.39 7.1 19.56 8.82C19.47 8.88 17.39 10.1 17.41 12.63C17.44 15.65 20.06 16.66 20.09 16.67C20.06 16.74 19.67 18.11 18.71 19.5ZM13 3.5C13.73 2.67 14.94 2.04 15.94 2C16.07 3.17 15.6 4.35 14.9 5.19C14.21 6.04 13.07 6.7 11.95 6.61C11.8 5.46 12.36 4.26 13 3.5Z"/>
</svg>
<svg width="100" height="86.462" version="1.1" viewBox="0 0 1079.9 933.69" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-4.1551e-5 -1.127e-5)">
<g transform="matrix(31.718 0 0 31.718 -4221 -5611.6)">
<path d="m147.45 199.64 3.2812-8.125c1.5625-0.0859 4.0977 0.26563 5.668 0.64453l-3.375 8.3594c-1.5312-0.37891-4.043-0.83985-5.5742-0.87891" fill="#3d87cf"/>
<path d="m162.2 195.43-3.4102 8.3984c-1.1406-0.9375-4.2656-2.7188-5.7656-3.3086l3.375-8.3594c1.5273 0.54297 4.7891 2.1797 5.8008 3.2695" fill="#fac705"/>
<path d="m165.54 187.65-3.3477 7.7812c-1.0938-1-4.2578-2.707-5.8008-3.2695l3.3828-8.375c1.543 0.51563 4.7617 2.7188 5.7656 3.8633" fill="#66c557"/>
<path d="m150.73 191.52 3.3281-8.2227c1.5586-0.0547 4.1562 0.19141 5.7226 0.49219l-3.3828 8.375c-1.5508-0.42578-4.1172-0.67578-5.668-0.64453" fill="#f3632e"/>
<path d="m139.46 194.54-1.6055-0.0273c0.10937-0.32422 0.25-0.6875 0.38672-0.99219l1.6211-4e-3c-0.11719 0.33204-0.25781 0.69141-0.40234 1.0234" fill="#3d87cf"/>
<path d="m141.94 195.88-2.0234-0.0117 0.56641-1.375c0.66797-4e-3 1.3438 0 2.0156 0.0234l-0.55859 1.3633" fill="#3d87cf"/>
<path d="m145.3 195.54c-0.23437 0.53906-0.43359 1.1172-0.67578 1.6602l-2.2773-0.0273 0.67187-1.6484 2.2812 0.0156" fill="#3d87cf"/>
<path d="m137.3 192.89-1.168-8e-3c0.0937-0.26953 0.21094-0.57031 0.33203-0.83985 0.39844-4e-3 0.79688-0.0273 1.1953-0.0117l-0.35938 0.85937" fill="#3d87cf"/>
<path d="m135.19 191.18c-0.30078 8e-3 -0.60547 0.0391-0.90625 0.0312l0.29297-0.71093c0.30078-0.0156 0.60156-0.0312 0.90234-0.0312l-0.28906 0.71093" fill="#3d87cf"/>
<path d="m140.52 191.9-1.6094-0.0195 0.38671-0.98828c0.54688 0.0156 1.0938-0.0156 1.6367 4e-3l-0.41406 1.0039" fill="#3d87cf"/>
<path d="m142.99 193.26-2.0078-8e-3 0.54297-1.3672c0.67578-4e-3 1.3516-8e-3 2.0274 8e-3l-0.5625 1.3672" fill="#3d87cf"/>
<path d="m145.7 194.55-2.2852-0.0508 0.66406-1.6211 2.2774 0.0234-0.65625 1.6484" fill="#3d87cf"/>
<path d="m138.41 190.16c-0.39063-0.0117-0.79297 0.0195-1.1875-4e-3l0.35937-0.88672 1.1641 0.0312c-0.0859 0.27734-0.20703 0.58203-0.33594 0.85938" fill="#3d87cf"/>
<path d="m136.29 188.46-0.90235 0.0195 0.27735-0.70703c0.29297-0.0273 0.60937-0.0273 0.91406-0.0273l-0.28906 0.71484" fill="#3d87cf"/>
<path d="m142.71 186.48-1.6133-0.0117 0.39453-1.0078c0.54297 8e-3 1.0859 0 1.6328 0.0117l-0.41406 1.0078" fill="#f3632e"/>
<path d="m143.18 187.84 0.54297-1.3828h2.0117l-0.54297 1.3828h-2.0117" fill="#f3632e"/>
<path d="m147.92 189.04-2.2852-0.0156 0.66015-1.6445 2.2812 8e-3 -0.65625 1.6523" fill="#f3632e"/>
<path d="m140.61 184.72c-0.38281 0.0195-0.78515 0-1.1758 8e-3l0.32813-0.875c0.38281-0.0312 0.78906 0.0156 1.1758 4e-3l-0.32813 0.86328" fill="#f3632e"/>
<path d="m138.48 183.01c-0.30078 8e-3 -0.60156 0.0391-0.90625 0.0273l0.29688-0.71094 0.89453-0.043-0.28516 0.72656" fill="#f3632e"/>
<path d="m143.8 183.78c-0.53906 0-1.0781-8e-3 -1.6172-0.0312l0.39844-0.98828c0.54297 8e-3 1.0859-0.0117 1.6289 4e-3l-0.41016 1.0156" fill="#f3632e"/>
<path d="m146.27 185.14c-0.67187 0-1.3477 0.0117-2.0234-8e-3l0.5625-1.375c0.67578-8e-3 1.3477 4e-3 2.0234 8e-3l-0.5625 1.375" fill="#f3632e"/>
<path d="m148.96 186.45-2.2695-0.0234 0.66016-1.6524 2.2852 0.0156-0.67578 1.6602" fill="#f3632e"/>
<path d="m141.69 182.02h-1.1797l0.34765-0.88672c0.39844 0.0195 0.78907 0 1.1836 0.0234l-0.35156 0.86328" fill="#f3632e"/>
<path d="m139.58 180.3-0.90625 0.0391 0.28125-0.71484c0.30078-0.0352 0.60547-0.0195 0.90625-0.0391l-0.28125 0.71485" fill="#f3632e"/>
<path d="m138.44 197.3c-0.63672 8e-3 -1.2773 4e-3 -1.918-0.0156l0.45703-1.1328c0.64063 0 1.2852 0.0195 1.9336 0.0117l-0.47266 1.1367"/>
<path d="m153.11 184.74-2.8711 0.0195 1.0078-2.5039c0.97656-0.10938 1.9609-0.21485 2.9414-0.1836l-1.0781 2.668"/>
<path d="m140.71 177.73-1.0898 0.0234 0.31641-0.8086c0.36718-8e-3 0.73437-0.0234 1.1016-0.0234l-0.32813 0.8086"/>
<path d="m142.88 179.33c-0.48438-0.0156-0.96875-0.0117-1.457-0.0312l0.38281-0.9375c0.48828 0.0156 0.97656-8e-3 1.4648 0.0234l-0.39062 0.94531"/>
<path d="m150.19 183.86-2.7148-0.0117 0.78906-1.9727 2.7188 0.0234-0.79297 1.9609"/>
<path d="m145.1 182.48 0.58985-1.4922 2.3945 4e-3 -0.60157 1.5039-2.3828-0.0156"/>
<path d="m144.98 181.11-1.9219-0.0156 0.44532-1.125c0.64062 0 1.2852-0.0234 1.9336 0l-0.45703 1.1406"/>
<path d="m152.06 187.35c-0.95703 0.0234-1.918 0.0391-2.8789 0.043l0.9375-2.3164 2.8633-0.0117-0.92187 2.2852"/>
<path d="m150.98 190.01-2.8711 0.0391-0.0156-8e-3 0.92968-2.3164 2.8945-0.043-0.9375 2.3281"/>
<path d="m136.37 185.81 0.31641-0.80078 1.1055-0.0391-0.32422 0.82421-1.0977 0.0156"/>
<path d="m147.04 192.68 0.92578-2.3086 2.875-0.0352-0.91797 2.3125-2.8828 0.0312"/>
<path d="m139.59 187.47-1.457-0.0195 0.38281-0.9375c0.48828 0.0156 0.97265-8e-3 1.4609 0.0234l-0.38672 0.93359"/>
<path d="m146.91 191.97-2.7148-0.0195 0.78125-1.9609 2.7226 0.0234-0.78906 1.957"/>
<path d="m144.2 190.63-2.3711-8e-3 -0.0195-8e-3 0.60547-1.4883 2.3906 4e-3 -0.60547 1.5"/>
<path d="m141.69 189.26-1.918-0.0195 0.44141-1.125c0.64843-8e-3 1.3008-4e-3 1.9492 8e-3l-0.47266 1.1367"/>
<path d="m148.84 195.33-0.0117 0.0273-2.875 0.0352 0.94141-2.3711 2.8906-0.0312-0.94532 2.3398"/>
<path d="m147.76 198-2.8828 0.0703-0.0195-8e-3 0.95703-2.3477 2.8711-0.0273-0.92578 2.3125"/>
<path d="m134.17 193.94c-0.36328-0.0117-0.72656 0.0234-1.0898 0l0.31641-0.77344c0.37109-0.0312 0.74219-0.0234 1.1172-0.0391l-0.34375 0.8125"/>
<path d="m146.61 200.84c-0.96094-0.0234-1.918-0.0312-2.8828 0.0469l1.0039-2.4922 2.8945-0.0508-1.0156 2.4961"/>
<path d="m136.31 195.62-1.4688 8e-3 0.36328-0.93359c0.4961 0 0.98438-0.0156 1.4805-4e-3l-0.375 0.92969"/>
<path d="m143.65 200.04-2.7031-0.03906 0.79297-1.957 2.7031 0.0273-0.79297 1.9688"/>
<path d="m138.57 198.67 0.60546-1.5078 2.3789 0.0156-0.60547 1.5117-2.3789-0.0195"/>
<path d="m164.05 188.08c-1.0039-1.1445-2.3984-1.957-3.9414-2.4688l-2.4141 5.9727c1.5391 0.56641 2.8984 1.3438 3.9922 2.3398zm-3.1328 7.793c-1.0117-1.0898-2.4609-1.8633-3.9844-2.4062l-2.4531 6.1016c1.4961 0.58984 2.8984 1.2891 4.0391 2.2266zm6.2031-8.4883-7.668 18.977c-1.9883-2.7109-5.4453-4.4219-8.918-5.0703-1.1953-0.21875-2.3945-0.38281-3.5898-0.42969l1.0039-2.4688c1.5312 0.043 3.0664 0.22266 4.5977 0.60547l2.4766-6.1367c-1.5703-0.3789-3.1367-0.42578-4.6992-0.33984l0.80469-2.0156c1.5469-0.0312 3.0977 0.0664 4.6484 0.49218l2.3906-5.9102c-1.5664-0.30469-3.1328-0.41407-4.6914-0.35938l1.0703-2.6719c3.5547-0.0156 7.668 0.97656 10.582 3.3359 0.73828 0.58594 1.418 1.2344 1.9922 1.9922" fill-rule="evenodd"/>
</g>
</g>
</svg>
<svg version="1.1" width="90px" height="90px" viewBox="0 0 216 256" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Tux</title>
<defs id="tux_fx">
<linearGradient id="gradient_belly_shadow">
<stop offset="0" stop-color="#000000"/>
<stop offset="1" stop-color="#000000" stop-opacity="0.25"/>
</linearGradient>
<linearGradient id="gradient_wing_tip_right_shadow">
<stop offset="0" stop-color="#110800"/>
<stop offset="0.59" stop-color="#a65a00" stop-opacity="0.8"/>
<stop offset="1" stop-color="#ff921e" stop-opacity="0"/>
</linearGradient>
<linearGradient id="gradient_wing_tip_right_glare_1">
<stop offset="0" stop-color="#7c7c7c"/>
<stop offset="1" stop-color="#7c7c7c" stop-opacity="0.33"/>
</linearGradient>
<linearGradient id="gradient_wing_tip_right_glare_2">
<stop offset="0" stop-color="#7c7c7c"/>
<stop offset="1" stop-color="#7c7c7c" stop-opacity="0.33"/>
</linearGradient>
<linearGradient id="gradient_foot_left_layer_1">
<stop offset="0" stop-color="#b98309"/>
<stop offset="1" stop-color="#382605"/>
</linearGradient>
It won't allow more than 65536 characters. This 3rd SVG is a copy of the original 521 x 607 pixel file from https://commons.wikimedia.org/wiki/File:Tux.svg, with an edited viewbox.Your JavaScript
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.style.margin = '-8px';
const border = 10;
const wwidth = 750;
const hheight = 850;
const center = wwidth / 2;
document.body.style.backgroundColor = 'darkgrey';
document.body.appendChild(canvas);
canvas.width = wwidth;
canvas.height = hheight;
ctx.beginPath();
ctx.fillStyle = '#161616';
ctx.fillRect(0, 0, width, height);
var layout = {
windows: [
{type: 'window', x: 10, y: 10, width: 400, height: 300, color: '#FF0088', borderColor: '#000000', borderWidth: 4},
{type: 'window', x: 20, y: 20, width: 100, height: 100, color: '#0000FF', borderColor: '#000000', borderWidth: 2},
{type: 'window', x: 130, y: 20, width: 100, height: 100, color: '#00FF00', borderColor: '#000000', borderWidth: 2},
{type: 'window', x: 240, y: 20, width: 100, height: 100, color: '#FFFF10', borderColor: '#000000', borderWidth: 2}
]};
console.log(`layout = ${JSON.stringify(layout)}`);
var w;
for (w of layout.windows) {
var width = w.width;
var height = w.height;
ctx.beginPath();
ctx.fillStyle = w.color;
ctx.strokeStyle = w.borderColor;
ctx.lineWidth = w.borderWidth;
ctx.roundRect(w.x, w.y, w.width, w.height, [5]);
ctx.fill();
ctx.beginPath();
ctx.strokeStyle = w.borderColor;
ctx.lineWidth = w.borderWidth;
ctx.roundRect(w.x, w.y, w.width, w.height, [5]);
ctx.stroke();
}Your CSS
.logos { display:flex; align-items:center; gap:12px; }
.logos img, .logos svg { height:40px; width:auto; display:block; }