Boxy SVG Editor

**Acorn** · 13 April 2021, 04:32 PM

Just about everything the Xara Desktop Application (XDA) ought to be: https://boxy-svg.com/.

I have just started the 15-trial and can immediately see how powerful it is.
Definitely worth $10(+VAT)/yr for the power it brings to the XDA.

To be clear, you need to place the <svg> tags into a Placeholder code (body) or Xara will render all as a group of objects. A mouthful, but for simple objects, it is Copy & Paste.
Embedding SVGs also reduces the number of HTML calls so your websites could be slicker.

With an SVG, you can manipulate any part of it with JS and CSS for clicks and rollovers or even splash effects.

Oh, it has a user interface that does not get in the way.
The good thing is most of the UI is very familiar.
Manipulate shapes through Geometry and Elements...

Acorn

This is a torus:

<!doctype html>
<svg viewBox="48.655 51.207 312.914 313.022" width="312.914" height="313.022">
<defs>
<radialGradient gradientUnits="userSpaceOnUse" cx="-205.112" cy="-207.718" r="165.448" id="gradient-0">
<stop offset="0" style="stop-color: rgba(252, 50, 35, 1)"></stop>
<stop offset="0.707" style="stop-color: rgb(18, 210, 15);"></stop>
<stop offset="1" style="stop-color: rgba(183, 15, 2, 1)"></stop>
</radialGradient>
</defs>
<path d="M -205.112 -207.718 m -156.457 0 a 156.457 156.457 0 1 0 312.914 0 a 156.457 156.457 0 1 0 -312.914 0 Z M -205.112 -207.718 m -76.492 0 a 76.492 76.492 0 0 1 152.984 0 a 76.492 76.492 0 0 1 -152.984 0 Z" data-bx-shape="ring -205.112 -207.718 76.492 76.492 156.457 156.457 1@02aeb255" style="fill-opacity: 0.71; fill: url(#gradient-0);" transform="matrix(-1, 0, 0, -1, 0, 0)"></path>
</svg>

**Egg Bramhill** · 13 April 2021, 08:02 PM

Because you pointed the way:

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient gradientUnits="userSpaceOnUse" cx="185.602" cy="90.7" r="39.181" id="gradient-0" gradientTransform="matrix(3.248736, 0, 0, 3.33953, -359.96575, -131.882935)">
<stop offset="0" style="stop-color: rgb(24, 255, 97);"/>
<stop offset="1" style="stop-color: rgb(0, 125, 40);"/>
</radialGradient>
<radialGradient gradientUnits="userSpaceOnUse" cx="185.602" cy="90.7" r="39.181" id="gradient-1" gradientTransform="matrix(3.482101, 0, 0, 2.666758, -403.220164, -57.109428)">
<stop offset="0" style="stop-color: rgb(24, 255, 97);"/>
<stop offset="1" style="stop-color: rgb(0, 125, 40);"/>
</radialGradient>
<radialGradient gradientUnits="userSpaceOnUse" cx="184.552" cy="177.246" r="56.027" id="gradient-3" gradientTransform="matrix(3.629882, 0.113812, -0.101041, 2.938015, -401.959667, -154.206604)">
<stop offset="0" style="stop-color: rgba(2, 138, 45, 1)"/>
<stop offset="1" style="stop-color: rgba(1, 38, 12, 1)"/>
</radialGradient>
</defs>
<path d="M 374.698 215.38 C 374.698 178.427 317.712 21.149 247.41 21.149 C 177.111 21.149 120.123 177.94 120.123 214.475 C 133.081 228.003 387.58 225.684 374.698 215.38 Z" style="fill: url(#gradient-0);"/>
<path d="M 191.965 291.693 C 195.078 289.056 257.125 378.043 268.715 404.961 C 349.452 433.09 424.41 462.289 421.054 469.339 C 428.846 482.09 404.22 489.03 379.733 477.873 L 263.701 422.076 L 77.55 347.15 C 79.402 343.262 164.157 369.098 249.015 398.157 L 231.79 361.174 L 191.965 291.693 Z" style="paint-order: fill; fill-rule: evenodd; fill: url(#gradient-3);"/>
<path d="M 247.786 373.853 C 173.187 373.853 112.568 306.099 111.373 222.01 C 111.373 242.959 384.202 236.981 384.202 222.01 C 383.006 306.099 322.391 373.853 247.786 373.853 Z" style="fill: url(#gradient-1);"/>
</svg>

**Acorn** · 14 April 2021, 07:52 AM

Thank you Egg.

Acorn

**RKissane** · 14 April 2021, 12:51 PM

For the Web app it will not work with the Firefox browser.

Ray

**Acorn** · 14 April 2021, 01:45 PM

Originally Posted by RKissane

For the Web app it will not work with the Firefox browser. Ray

The designer does say that https://boxy-svg.com/requirements & https://boxy-svg.com/ideas/150/make-...omium-browsers.

I use Vivaldi by choice, mainly for persistence. The "best" browser these days is Edge.

Acorn