Raymond Raymond

SVG References Other Resources

event 2021-12-12 visibility 129 comment 0 insights toc
more_vert
insights Stats
toc Table of contents

Issue context

When creating SVG document that references external resources, it won't render referenced resources if using <img> tag. 

Example:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="586px" height="329px" version="1.1" style="background-color: transparent;"><defs><linearGradient x1="0%" y1="100%" x2="0%" y2="0%" id="mx-gradient-60a337-1-277116-1-s-0"><stop offset="0%" style="stop-color:#277116"/><stop offset="100%" style="stop-color:#60A337"/></linearGradient><linearGradient x1="0%" y1="100%" x2="0%" y2="0%" id="mx-gradient-945df2-1-5a30b5-1-s-0"><stop offset="0%" style="stop-color:#5A30B5"/><stop offset="100%" style="stop-color:#945DF2"/></linearGradient><linearGradient x1="0%" y1="100%" x2="0%" y2="0%" id="mx-gradient-4d72f3-1-3334b9-1-s-0"><stop offset="0%" style="stop-color:#3334B9"/><stop offset="100%" style="stop-color:#4D72F3"/></linearGradient></defs><g transform="translate(0.5,0.5)"><path d="M 217 35 L 315.63 35" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 320.88 35 L 313.88 38.5 L 315.63 35 L 313.88 31.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><image x="152" y="9" width="65" height="52" xlink:href="https://kontext.tech/draw/images/lib/azure2/storage/Storage_Accounts_Classic.svg" pointer-events="none"/><path d="M 390 35.02 L 505.63 35.02" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 510.88 35.02 L 503.88 38.52 L 505.63 35.02 L 503.88 31.52 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><image x="322" y="1" width="68" height="68" xlink:href="https://kontext.tech/draw/images/lib/azure2/databases/Data_Factory.svg" pointer-events="none"/><path d="M 217 148.3 L 270.5 148.3 L 329.18 148.25" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 334.43 148.25 L 327.43 151.76 L 329.18 148.25 L 327.43 144.76 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 175.28 168.14 C 173.81 168.14 172.39 167.33 171.66 165.8 L 163 150.2 C 162.22 148.83 162.34 147.25 163 146.12 L 171.73 130.51 C 172.47 129.09 173.79 128.36 175.14 128.36 L 192.66 128.36 C 193.97 128.36 195.26 129.02 196.03 130.35 L 204.73 145.95 C 205.78 147.59 205.42 149.34 204.83 150.32 L 196.17 165.82 C 195.6 167.08 194.29 168.14 192.61 168.14 Z" fill="#5184f3" stroke="none" pointer-events="none"/><path d="M 191.32 168.14 L 176.62 152.98 L 178.96 149.39 L 176.61 147.3 L 191.26 143.54 L 202.27 154.9 L 196.17 165.82 C 195.6 167.08 194.29 168.14 192.61 168.14 Z" fill-opacity="0.07" fill="#000000" stroke="none" pointer-events="none"/><path d="M 188.79 146.15 C 189.18 146.15 189.46 145.81 189.46 145.4 C 189.46 144.8 189.12 144.6 188.8 144.6 C 188.26 144.6 188 144.95 188 145.36 C 188 145.83 188.33 146.15 188.79 146.15 Z M 176.89 147.43 C 176.7 147.43 176.47 147.23 176.47 147.02 L 176.47 143.89 C 176.47 143.53 176.69 143.41 177.09 143.41 L 190.84 143.41 C 191.17 143.41 191.39 143.48 191.39 143.95 L 191.39 146.84 C 191.39 147.16 191.22 147.43 190.84 147.43 Z M 188.75 151.9 C 189.16 151.9 189.5 151.51 189.5 151.12 C 189.5 150.67 189.24 150.34 188.76 150.34 C 188.31 150.34 187.99 150.61 187.99 151.12 C 187.99 151.49 188.3 151.9 188.75 151.9 Z M 177.03 153.11 C 176.67 153.11 176.47 152.92 176.47 152.64 L 176.47 149.58 C 176.47 149.29 176.66 149.09 177.03 149.09 L 190.71 149.09 C 191.2 149.09 191.39 149.23 191.39 149.7 L 191.39 152.36 C 191.39 152.84 191.21 153.11 190.76 153.11 Z" fill="#ffffff" stroke="none" pointer-events="none"/><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 179px; margin-left: 184px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #999999; line-height: 1.2; pointer-events: none; font-weight: bold; white-space: nowrap; ">Cloud<br />Storage</div></div></div></foreignObject><text x="184" y="190" fill="#999999" font-family="Helvetica" font-size="11px" text-anchor="middle" font-weight="bold">[Not supported by viewer]</text></switch></g><path d="M 390 148.3 L 451 148.3 L 517.18 148.25" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 522.43 148.25 L 515.43 151.76 L 517.18 148.25 L 515.43 144.76 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 348.28 168.14 C 346.81 168.14 345.39 167.33 344.66 165.8 L 336 150.2 C 335.22 148.83 335.34 147.25 336 146.12 L 344.73 130.51 C 345.47 129.09 346.79 128.36 348.14 128.36 L 365.66 128.36 C 366.97 128.36 368.26 129.02 369.03 130.35 L 377.73 145.95 C 378.78 147.59 378.42 149.34 377.83 150.32 L 369.17 165.82 C 368.6 167.08 367.29 168.14 365.61 168.14 Z" fill="#5184f3" stroke="none" pointer-events="none"/><path d="M 361.03 168.14 L 351.31 158.13 L 353.76 156.95 L 349.48 152.76 L 350.82 150.43 L 349.58 149.24 L 350.29 147.24 L 349.48 146.34 L 354.58 141.51 L 351.2 138.41 L 356.84 140.48 L 362.63 138.36 L 376.43 152.82 L 369.17 165.82 C 368.6 167.08 367.29 168.14 365.61 168.14 Z" fill-opacity="0.07" fill="#000000" stroke="none" pointer-events="none"/><path d="M 364.39 146.34 L 362.33 146.34 L 362.33 145.02 L 357.91 142.28 L 357.91 144.22 L 355.93 144.22 L 355.93 142.28 L 351.52 145.03 L 351.59 146.34 L 349.48 146.34 L 349.48 143.85 L 354.96 140.59 L 351.2 138.41 L 353.23 137.24 L 356.91 139.42 L 360.63 137.22 L 362.63 138.36 L 358.92 140.58 L 364.39 143.87 Z M 363.34 149.63 C 362.71 149.63 362.1 149.21 362.1 148.3 C 362.1 147.65 362.58 146.97 363.41 146.97 C 364.05 146.97 364.65 147.4 364.65 148.33 C 364.65 148.99 364.09 149.63 363.34 149.63 Z M 356.95 151.47 C 356.15 151.47 355.63 150.85 355.63 150.16 C 355.63 149.44 356.12 148.87 356.94 148.87 C 357.67 148.87 358.18 149.31 358.18 150.15 C 358.18 150.93 357.79 151.47 356.95 151.47 Z M 356.91 147.75 C 356.18 147.75 355.63 147.16 355.63 146.44 C 355.63 145.59 356.19 145.1 356.93 145.1 C 357.64 145.1 358.18 145.63 358.18 146.5 C 358.18 147.21 357.7 147.75 356.91 147.75 Z M 350.5 149.6 C 349.73 149.6 349.2 149.05 349.2 148.3 C 349.2 147.5 349.74 146.99 350.51 146.99 C 351.22 146.99 351.74 147.55 351.74 148.31 C 351.74 149.02 351.23 149.6 350.5 149.6 Z M 360.62 159.41 L 356.93 157.11 L 353.22 159.43 L 351.31 158.13 L 354.96 155.97 L 349.48 152.76 L 349.48 150.31 L 351.49 150.31 L 351.5 151.54 L 355.93 154.19 L 355.93 152.26 L 357.91 152.26 L 357.91 154.19 L 362.33 151.5 L 362.33 150.31 L 364.39 150.31 L 364.39 152.79 L 358.82 155.97 L 362.62 158.18 Z" fill="#ffffff" stroke="none" pointer-events="none"/><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 179px; margin-left: 357px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #999999; line-height: 1.2; pointer-events: none; font-weight: bold; white-space: nowrap; ">Cloud<br />Dataflow</div></div></div></foreignObject><text x="357" y="190" fill="#999999" font-family="Helvetica" font-size="11px" text-anchor="middle" font-weight="bold">[Not supported by viewer]</text></switch></g><path d="M 536.28 168.14 C 534.81 168.14 533.39 167.32 532.66 165.79 L 524 150.19 C 523.22 148.83 523.34 147.25 524 146.11 L 532.73 130.51 C 533.47 129.09 534.79 128.36 536.14 128.36 L 553.66 128.36 C 554.97 128.36 556.26 129.02 557.03 130.35 L 565.73 145.94 C 566.78 147.59 566.42 149.34 565.83 150.31 L 557.17 165.82 C 556.6 167.07 555.29 168.14 553.61 168.14 Z" fill="#5184f3" stroke="none" pointer-events="none"/><path d="M 553.12 168.14 L 539.16 153.78 L 538.55 144.58 L 545.84 140.58 L 550.48 142.54 L 562.93 155.51 L 557.17 165.82 C 556.6 167.07 555.29 168.14 553.61 168.14 Z" fill-opacity="0.07" fill="#000000" stroke="none" pointer-events="none"/><path d="M 547.13 148.91 L 548.77 148.91 L 548.77 150.28 C 548.4 151.02 547.78 151.58 547.13 152.11 Z M 544.07 152.52 L 544.07 145.8 L 545.68 145.8 L 545.68 152.53 C 545.15 152.76 544.49 152.71 544.07 152.52 Z M 542.76 152.03 C 542.18 151.67 541.57 151.3 541.12 150.36 L 541.12 147.86 L 542.76 147.86 Z M 544.69 154.32 C 548.21 154.32 550.77 151.37 550.77 148.4 C 550.77 144.18 547.34 142.16 544.93 142.16 C 542.27 142.16 539.06 144.55 539.06 148.21 C 539.06 151.83 542.17 154.32 544.69 154.32 Z M 553.47 157.64 C 553.18 157.87 552.77 157.85 552.52 157.59 L 549.7 154.65 C 548.4 155.62 546.98 156.37 544.71 156.37 C 540.8 156.37 537 152.73 537 148.41 C 537 143.96 540.37 140.14 544.95 140.14 C 549.9 140.14 552.82 144.59 552.82 148.13 C 552.82 150.29 552.18 151.94 551.17 153.15 L 554.08 156.18 C 554.27 156.39 554.3 156.79 554.05 157.07 Z" fill="#ffffff" stroke="none" pointer-events="none"/><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 179px; margin-left: 545px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #999999; line-height: 1.2; pointer-events: none; font-weight: bold; white-space: nowrap; ">BigQuery</div></div></div></foreignObject><text x="545" y="190" fill="#999999" font-family="Helvetica" font-size="11px" text-anchor="middle" font-weight="bold">[Not supported by viewer]</text></switch></g><path d="M 229 288 L 305.63 288" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 310.88 288 L 303.88 291.5 L 305.63 288 L 303.88 284.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 151 249 L 229 249 L 229 327 L 151 327 Z" fill="url(#mx-gradient-60a337-1-277116-1-s-0)" stroke="none" pointer-events="none"/><path d="M 213.28 291.22 L 213.71 288.21 C 217.66 290.57 217.71 291.55 217.71 291.58 C 217.7 291.58 217.03 292.14 213.28 291.22 Z M 211.12 290.62 C 204.3 288.56 194.8 284.2 190.96 282.39 C 190.96 282.37 190.96 282.36 190.96 282.34 C 190.96 280.86 189.76 279.66 188.28 279.66 C 186.81 279.66 185.61 280.86 185.61 282.34 C 185.61 283.82 186.81 285.02 188.28 285.02 C 188.93 285.02 189.52 284.78 189.98 284.39 C 194.51 286.53 203.93 290.82 210.8 292.85 L 208.08 312.03 C 208.07 312.08 208.07 312.13 208.07 312.18 C 208.07 313.87 200.6 316.97 188.39 316.97 C 176.05 316.97 168.49 313.87 168.49 312.18 C 168.49 312.13 168.49 312.08 168.48 312.03 L 162.81 270.57 C 167.72 273.95 178.29 275.74 188.39 275.74 C 198.48 275.74 209.03 273.96 213.96 270.59 Z M 162.21 266.25 C 162.29 264.78 170.71 259.03 188.39 259.03 C 206.07 259.03 214.5 264.78 214.58 266.25 L 214.58 266.75 C 213.61 270.04 202.69 273.51 188.39 273.51 C 174.07 273.51 163.15 270.02 162.21 266.73 Z M 216.81 266.27 C 216.81 262.41 205.74 256.8 188.39 256.8 C 171.05 256.8 159.98 262.41 159.98 266.27 L 160.08 267.11 L 166.27 312.27 C 166.41 317.32 179.88 319.2 188.39 319.2 C 198.94 319.2 210.15 316.77 210.3 312.27 L 212.97 293.44 C 214.45 293.8 215.68 293.98 216.66 293.98 C 217.98 293.98 218.87 293.66 219.41 293.01 C 219.85 292.49 220.02 291.85 219.89 291.16 C 219.61 289.62 217.77 287.96 214.05 285.83 L 216.69 267.16 Z" fill="#ffffff" stroke="none" pointer-events="none"/><path d="M 390 288 L 499.63 288" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 504.88 288 L 497.88 291.5 L 499.63 288 L 497.88 284.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/><path d="M 312 249 L 390 249 L 390 327 L 312 327 Z" fill="url(#mx-gradient-945df2-1-5a30b5-1-s-0)" stroke="none" pointer-events="none"/><path d="M 342.91 268.36 L 345.22 268.36 L 345.22 266.04 L 342.91 266.04 Z M 340.6 269.51 L 340.6 264.89 C 340.6 264.25 341.12 263.73 341.76 263.73 L 346.38 263.73 C 347.02 263.73 347.53 264.25 347.53 264.89 L 347.53 269.51 C 347.53 270.15 347.02 270.67 346.38 270.67 L 341.76 270.67 C 341.12 270.67 340.6 270.15 340.6 269.51 Z M 352.16 261.42 L 354.47 261.42 L 354.47 259.11 L 352.16 259.11 Z M 349.84 262.58 L 349.84 257.96 C 349.84 257.32 350.36 256.8 351 256.8 L 355.62 256.8 C 356.26 256.8 356.78 257.32 356.78 257.96 L 356.78 262.58 C 356.78 263.22 356.26 263.73 355.62 263.73 L 351 263.73 C 350.36 263.73 349.84 263.22 349.84 262.58 Z M 354.47 272.98 L 356.78 272.98 L 356.78 270.67 L 354.47 270.67 Z M 353.31 268.36 L 357.93 268.36 C 358.57 268.36 359.09 268.87 359.09 269.51 L 359.09 274.13 C 359.09 274.77 358.57 275.29 357.93 275.29 L 353.31 275.29 C 352.67 275.29 352.16 274.77 352.16 274.13 L 352.16 269.51 C 352.16 268.87 352.67 268.36 353.31 268.36 Z M 351 280.49 C 348.97 280.49 341.59 280.4 336.79 279.22 L 348.51 297.78 C 348.63 297.97 348.69 298.18 348.69 298.4 L 348.69 301.03 C 350.31 301.5 351.81 301.51 353.31 301.05 L 353.31 298.4 C 353.31 298.18 353.37 297.97 353.49 297.78 L 365.21 279.22 C 360.41 280.4 353.03 280.49 351 280.49 Z M 332.8 277.24 C 332.62 276.98 332.51 276.69 332.51 276.37 C 332.51 273.08 343.35 272.48 349.82 272.41 L 349.84 274.72 C 341.9 274.8 337.05 275.71 335.34 276.38 C 337.15 277.14 342.5 278.18 351 278.18 C 359.48 278.18 364.82 277.15 366.65 276.39 C 365.9 276.09 364.35 275.64 361.26 275.27 L 361.54 272.97 C 368.54 273.83 369.49 275.17 369.49 276.37 C 369.49 276.69 369.38 276.98 369.2 277.24 L 355.62 298.74 L 355.62 301.87 C 355.62 302.34 355.34 302.76 354.9 302.94 C 353.64 303.45 352.37 303.7 351.08 303.7 C 349.79 303.7 348.49 303.45 347.13 302.95 C 346.68 302.78 346.38 302.35 346.38 301.87 L 346.38 298.74 Z M 359 310.67 C 359.18 311.1 359.08 311.6 358.75 311.93 L 351.82 318.86 C 351.59 319.09 351.3 319.2 351 319.2 C 350.7 319.2 350.41 319.09 350.18 318.86 L 343.25 311.93 C 342.92 311.6 342.82 311.1 343 310.67 C 343.18 310.24 343.6 309.96 344.07 309.96 L 347.53 309.96 L 347.53 306.49 L 349.84 306.49 L 349.84 311.11 C 349.84 311.75 349.33 312.27 348.69 312.27 L 346.86 312.27 L 351 316.41 L 355.14 312.27 L 353.31 312.27 C 352.67 312.27 352.16 311.75 352.16 311.11 L 352.16 306.49 L 354.47 306.49 L 354.47 309.96 L 357.93 309.96 C 358.4 309.96 358.82 310.24 359 310.67 Z" fill="#ffffff" stroke="none" pointer-events="none"/><path d="M 506 249 L 584 249 L 584 327 L 506 327 Z" fill="url(#mx-gradient-4d72f3-1-3334b9-1-s-0)" stroke="none" pointer-events="none"/><path d="M 557.06 282.62 C 555.88 282.62 554.92 281.66 554.92 280.48 C 554.92 279.31 555.88 278.35 557.06 278.35 C 558.24 278.35 559.2 279.31 559.2 280.48 C 559.2 281.66 558.24 282.62 557.06 282.62 M 551.64 295.61 C 550.46 295.61 549.5 294.65 549.5 293.47 C 549.5 292.29 550.46 291.33 551.64 291.33 C 552.82 291.33 553.78 292.29 553.78 293.47 C 553.78 294.65 552.82 295.61 551.64 295.61 M 538.63 293.44 C 537.45 293.44 536.49 292.48 536.49 291.3 C 536.49 290.13 537.45 289.17 538.63 289.17 C 539.81 289.17 540.77 290.13 540.77 291.3 C 540.77 292.48 539.81 293.44 538.63 293.44 M 533.21 305.34 C 532.03 305.34 531.07 304.39 531.07 303.21 C 531.07 302.03 532.03 301.07 533.21 301.07 C 534.39 301.07 535.35 302.03 535.35 303.21 C 535.35 304.39 534.39 305.34 533.21 305.34 M 557.06 276.13 C 554.65 276.13 552.7 278.08 552.7 280.48 C 552.7 281.96 553.44 283.26 554.56 284.05 L 552.52 289.2 C 552.24 289.14 551.94 289.11 551.64 289.11 C 549.73 289.11 548.11 290.36 547.53 292.07 L 542.97 291.04 C 542.83 288.76 540.95 286.95 538.63 286.95 C 536.22 286.95 534.26 288.9 534.26 291.3 C 534.26 292.43 534.7 293.44 535.41 294.22 L 533.42 298.87 C 533.35 298.87 533.28 298.85 533.21 298.85 C 530.8 298.85 528.84 300.81 528.84 303.21 C 528.84 305.61 530.8 307.57 533.21 307.57 C 535.62 307.57 537.57 305.61 537.57 303.21 C 537.57 301.67 536.76 300.32 535.55 299.54 L 537.31 295.44 C 537.73 295.57 538.16 295.66 538.63 295.66 C 540.35 295.66 541.82 294.66 542.53 293.22 L 547.36 294.31 C 547.76 296.31 549.52 297.83 551.64 297.83 C 554.05 297.83 556.01 295.87 556.01 293.47 C 556.01 292.17 555.42 291.02 554.52 290.22 L 556.66 284.8 C 556.79 284.81 556.92 284.84 557.06 284.84 C 559.47 284.84 561.43 282.89 561.43 280.48 C 561.43 278.08 559.47 276.13 557.06 276.13 M 545 316.98 C 534.16 316.98 526.05 313.72 526.05 310.81 L 526.05 269.23 C 529.74 272.22 537.55 273.81 545.02 273.81 C 552.46 273.81 560.24 272.24 563.95 269.26 L 563.95 310.81 C 563.95 313.72 555.84 316.98 545 316.98 M 545.02 259.02 C 556.17 259.02 563.95 262.33 563.95 265.3 C 563.95 268.27 556.17 271.59 545.02 271.59 C 533.87 271.59 526.1 268.27 526.1 265.3 C 526.1 262.33 533.87 259.02 545.02 259.02 M 566.17 265.3 C 566.17 259.78 555.28 256.8 545.02 256.8 C 534.77 256.8 523.88 259.78 523.88 265.3 C 523.88 265.31 523.88 265.32 523.88 265.33 L 523.83 265.33 L 523.83 310.81 C 523.83 316.26 534.74 319.2 545 319.2 C 555.26 319.2 566.17 316.26 566.17 310.81 L 566.17 265.33 L 566.17 265.33 C 566.17 265.32 566.17 265.31 566.17 265.3" fill="#ffffff" stroke="none" pointer-events="none"/><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 29px; margin-left: 2px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">Azure</div></div></div></foreignObject><text x="21" y="33" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">[Not supported by viewer]</text></switch></g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 148px; margin-left: 2px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">GCP</div></div></div></foreignObject><text x="21" y="152" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">[Not supported by viewer]</text></switch></g><g><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 38px; height: 1px; padding-top: 269px; margin-left: 2px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: none; white-space: normal; word-wrap: normal; ">AWS</div></div></div></foreignObject><text x="21" y="273" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">[Not supported by viewer]</text></switch></g><image x="512" y="1" width="60" height="69" xlink:href="https://kontext.tech/draw/images/lib/azure2/analytics/Azure_Synapse_Analytics.svg" pointer-events="none"/></g></svg>

20211212120928-image.png

All the image element (xlink:href) in the document won't be rendered. 

Root cause

As mentioned in document SVG Security, this is the expected behavior of SVG.

If an SVG file is fetched as image, then certain requirements apply to this document: The SVG document is not allowed to fetch any resources. This also applies to scripts, stylesheets or images.

Fix

To fix this issue, we can use <object> tag:

<object type="image/svg+xml" data="image.svg"></object>

References

The Best Way to Embed SVG on HTML (2021)

More from Kontext
comment Comments
No comments yet.

Please log in or register to comment.

account_circle Log in person_add Register

Log in with external accounts