1,958 karma · joined April 19, 2011
There is nothing special about the OpenClaw thing other than the enormous astroturfing campaign that benefited various "crypto" influencers and other scammers. Anyone who endorses it is either manipulated or trying to manipulate you.
I wonder what Anthropic tries to achieve by spreading such blatant lies with their bot accounts. I'm definitely not buying anything from a company so morally corrupt to smear the competition while claiming to be somehow "ethical". And I'm not talking just about this thread, it's a recurring pattern on Reddit.
Last year I was trying to setup a business LinkedIn page for SEO purposes, which meant I also had to create a personal account. After being told several times that I absolutely need to scan my ID card with that dodgy app I simply replied that I can't do it due to security concerns. After several weeks they unlocked my account anyway, but I suspect this would not happen if algorithms determined that I actually needed that account to find a job and pay my bills.
You will be outcompeted if you waste your time reinventing the wheel and optimizing for stuff that doesn't matter. There is some market for highly optimized apps like e.g. Sublime Text, but you can clearly see that the companies behind them are struggling.
Boxy SVG: https://boxy-svg.com/#demo-elements
Repath Studio: https://repath.studio/
MacSVG: http://macsvg.org
Modern web browsers now support "clip-path" CSS property with inline/shorthand values which are much more convenient to use than <clipPath> element. There are some examples on MDN [1]. I haven't performed extensive tests yet but they seem to be working just fine with SVG objects.
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
I think Inkscape still uses Potrace internally, which is produces a bit better results.
This way you get a fast and reliable rendering engine for free (including support for MathML and HTML objects), you can easily import third-party SVG assets with a normalizer such as SVGO and you don't need to bother with all the convoluted special cases.
[1] https://github.com/linebender/resvg/blob/main/crates/usvg/do...
SVGator is focused primarily on animation and it's rather pricey. Boxy SVG might be a better choice if you are looking for a web-based SVG editor (disclaimer: I'm the developer).
If I recall correctly, the primary motivation behind <symbol> and <use> was interoperability with corresponding primitives in Adobe Illustrator.
Despite all the recent enshitification, I can't think of any alternative solution that would come even close to what Firebase has to offer. Authentication API is especially hard to beat (cheap and very easy to integrate).
To make it work you would have to either replace <img src="sprite.svg#green"/> with <svg ...><use href="sprite.svg#green"></use></svg> or add views to the sprite file:
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="recolorable" viewBox="0 0 100 100">
<rect width="100" height="100" style="fill: inherit;"/>
</symbol>
<view id="blue" viewBox=" 0 0 100 100"></view>
<view id="green" viewBox="100 0 100 100"></view>
</defs>
<use x="0" y="0" width="100" height="100" style="fill: blue;" xlink:href="#recolorable"/>
<use x="100" y="0" width="100" height="100" style="fill: green;" xlink:href="#recolorable"/>
</svg>You can play with a sample SVG sprite on https://boxy-svg.com/#demo-symbols. Individual icons are shown under "Defs Panel -> Symbols". To edit an icon just double-click its thumbnail. To make part of an icon recolorable, select that part and then click "Fill Panel -> Paint -> Type -> Inherit".
You could then create separate symbols which contain a recolored instance of the original symbol. The underlying markup will look something like this:
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="recolorable" viewBox="0 0 100 100">
<rect width="100" height="100" style="fill: inherit;"/>
</symbol>
<symbol id="blue" viewBox="0 0 100 100">
<use width="100" height="100" style="fill: blue;" xlink:href="#recolorable"/>
</symbol>
<symbol id="green" viewBox="0 0 100 100">
<use width="100" height="100" style="fill: green;" xlink:href="#recolorable"/>
</symbol>
</defs>
</svg>
Finally, use a fragment identifier to show a specific icon in HTML: <img src="sprite.svg#green">It is actually possible to build an intuitive UI for filters while staying compliant with SVG. You just have to abstract away the low level SVG primitives ("feColorMatrix", "feComponentTransfer", etc.) with user-friendly presets such as "Sepia" or "Drop shadow". I actually created a mockup for such UI in Inkscape long time ago [1] and I eventually implemented it in Boxy SVG [2].
Advanced filter editing could be improved by switching from tree-based to node-based UI, in similar fashion to e.g. Jasc WebDraw [3].
[1] https://wiki.inkscape.org/wiki/SpecSimpleFiltersUi
I think fabric.js is worth checking as its source code is well organized and documented. It's not a small project though and the latest version was rewritten in TypeScript: https://github.com/fabricjs/fabric.js/tree/master
This is basically what I'm trying to achieve with Boxy SVG project: a vector graphics editor with UI similar to Inkscape, but focused primarily on SVG editing. It also allows you to easily switch between the code ("Elements") and timeline ("Animations") views: https://boxy-svg.com/blog/21
Unlike Illustrator/Sketch/Inkscape it can also create and manipulate SVG animation elements (https://boxy-svg.com/blog/21) - a very powerful feature which is now supported by all major browsers.
Igalia has made some massive improvements to the SVG engine in WebKit recently: https://wpewebkit.org/blog/05-new-svg-engine.html