Boxy SVG Editor

Printable View

13 April 2021, 04:32 PM
Acorn

Boxy SVG Editor

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>
13 April 2021, 08:02 PM
Egg Bramhill

Re: Boxy SVG Editor

Because you pointed the way:

Quote:

<?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>
14 April 2021, 07:52 AM
Acorn

Re: Boxy SVG Editor

Thank you Egg.

Acorn
14 April 2021, 12:51 PM
RKissane

Re: Boxy SVG Editor

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

Ray
14 April 2021, 01:45 PM
Acorn

Re: Boxy SVG Editor

Quote:

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
14 April 2021, 08:30 PM
handrawn

Re: Boxy SVG Editor

best in what sense - firefox is much easier to customise as a uuser
14 April 2021, 10:04 PM
Acorn

Re: Boxy SVG Editor

Quote:

Originally Posted by handrawn

best in what sense - firefox is much easier to customise as a uuser

It is more compliant with the standards. It seems to have faster performance. It is more stable. it allows the setting up of off-line applications. Vivaldi is easier than FF in the customisation stakes.

I use FF, V & Chrome almost interchangeably.

Acorn
17 April 2021, 04:33 PM
handrawn

Re: Boxy SVG Editor

dosn't seem so long a ago you had little good to say about edge.... still, it has moved on a lot

I can set firefox not to automatically play media on a any site I visit; can't do that on edge, it decides for itself 'based on my previous behaviour' whether to play automatically or not, and that is not what I want

just a small example of why, as a user, I prefer the fox;

it's not slow, certainly no slower than edge when browsing

I tried vivaldi couple of years ago, but never really took to it
17 April 2021, 05:18 PM
Acorn

Re: Boxy SVG Editor

This is drifting from the original post.

Boxy SVG Editor doesn't run in Firefox.
Boxy does have an off-line app mode, which creates an MS Edge App, and if I had not mentioned it, most would have carried on with their proper browser.
If you try the App, its About is impressive, covering all its sources.

Acorn
17 April 2021, 05:45 PM
handrawn

Re: Boxy SVG Editor

sure, point taken... I have absolutely no use for Boxy SVG and maybe never will... you answered my query... thanks