+
Skip to content

renderer: support shape-rendering="crispEdges" for aliased shapes #2499

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

renderer: support shape-rendering="crispEdges" for aliased shapes #2499

wants to merge 1 commit into from
+72 −3

Conversation

OverloadedOrama
Copy link
Collaborator

Implements #1869 for the software renderer. If the shape-rendering="crispEdges" attribute is used in the SVG, the software renderer does not use anti-aliasing for the shape's lines. The rest of the shape-rendering values just default to anti-aliasing, I'm not sure how else to handle them. I tested it with svg2png and Godot and it seems to be working as intended.

Tested using the following svg file:

<svg width="460" height="200">
  <rect width="140" height="30" x="10" y="10" rx="20" ry="20" style="fill:rgb(0,0,255)" />
  <rect width="140" height="30" x="160" y="10" rx="20" ry="20" style="fill:rgb(0,0,255);stroke-width:1;stroke:red" />
  <rect width="140" height="30" x="310" y="10" rx="20" ry="20" shape-rendering="crispEdges" style="fill:rgb(0,0,255);stroke-width:1;stroke:red" />
  <rect width="140" height="30" x="10" y="60" rx="20" ry="20" fill="none" style="stroke-width:1;stroke:red" />
  <rect width="140" height="30" x="160" y="60" rx="20" ry="20" fill="none" shape-rendering="crispEdges" style="stroke-width:1;stroke:red" />
  <ellipse cx="210" cy="110" rx="170" ry="15" shape-rendering="crispEdges" style="fill:lime" />
  <ellipse cx="210" cy="160" rx="200" ry="30" style="fill:purple" />
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
    style="fill:none;stroke:white;stroke-width:3" shape-rendering="crispEdges" />
  <polyline points="60,20 80,25 100,40 120,120 160,140 240,180"
    style="fill:none;stroke:white;stroke-width:3" />
  <path d="M 10 10 C 20 20, 40 20, 50 10" stroke="black" shape-rendering="crispEdges" fill="transparent"/>
</svg>

Result png:
Result png

This is the first time I'm contributing to ThorVG, hopefully I did everything right. 😅

@hermet hermet added the feature New feature additions label Jul 1, 2024
@hermet
Copy link
Member

hermet commented Jul 1, 2024

@OverloadedOrama Hello, Thanks for your contribution. I am curious about the practical use of this feature in user applications. Could you provide some tips on use cases?

@hermet
Copy link
Member

hermet commented Jul 1, 2024

@OverloadedOrama One more question, do you really need to apply this per shape or scene? or is it applied to the full screen in the ThorVG canvas?

@OverloadedOrama
Copy link
Collaborator Author

@hermet Hello! I am working on a pixel art editor made with Godot, and I want to implement support for vector layers in order to have non-destructive shapes, and my idea is to construct a SVG behind the scenes that gets rasterized by Godot/ThorVG in order to be drawn in the canvas. This already can work fine, but all shapes are currently anti-aliased, with no option to turn it off, which doesn't work well with pixel art. So I thought to use the shape-rendering SVG attribute to control whether a shape is anti-aliased or not.

I think this needs to be applied per-shape, just like the attribute is per-shape in SVG, in order to allow users to choose which shapes are anti-aliased and which ones are not.

@hermet
Copy link
Member

hermet commented Jul 1, 2024

@RuiwenTang @SergeyLebedkin Hello, could you please confirm with the GL/WG engine side if they can allow the AA option per shape?

@OverloadedOrama OverloadedOrama force-pushed the crisp-edges branch 2 times, most recently from 49972ae to 25cf78c Compare July 3, 2024 20:13
@OverloadedOrama
Copy link
Collaborator Author

I'm not sure why unit tests are failing. For some reason, if I uncomment either line 90 or line 91 on tvgSwShape.cpp, the unit tests pass fine, but I don't understand why adding line 90 makes them fail.

JSUYA
JSUYA reviewed Jul 4, 2024
View reviewed changes
@github-actions github-actions bot added svg SVG features APIs Update / Revise APIs cpu Software render backend renderer Core rendering labels Oct 24, 2024
@hermet hermet force-pushed the main branch 6 times, most recently from 87ee4f3 to 9b43b93 Compare December 18, 2024 05:37
@hermet hermet changed the title Support shape-rendering="crispEdges" for aliased shapes in the software renderer renderer: support shape-rendering="crispEdges" for aliased shapes Feb 13, 2025
@hermet hermet force-pushed the main branch 8 times, most recently from 7ceb794 to 43923a5 Compare June 25, 2025 15:59
@hermet hermet force-pushed the main branch 4 times, most recently from 9ddde24 to dac61de Compare August 5, 2025 04:06
@hermet hermet force-pushed the main branch 9 times, most recently from 30c82d7 to 0c3e8ff Compare September 3, 2025 17:59
@hermet hermet force-pushed the main branch 2 times, most recently from 7b0fe6f to 811aac3 Compare September 22, 2025 16:00
@hermet hermet force-pushed the main branch 5 times, most recently from d471af2 to 0aaa738 Compare October 13, 2025 13:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@JSUYA JSUYA JSUYA left review comments

@mgrudzinska mgrudzinska Awaiting requested review from mgrudzinska

@hermet hermet Awaiting requested review from hermet hermet is a code owner

At least 2 approving reviews are required to merge this pull request.

Assignees

@OverloadedOrama OverloadedOrama

Labels

APIs Update / Revise APIs cpu Software render backend feature New feature additions renderer Core rendering svg SVG features

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@OverloadedOrama @hermet @JSUYA
点击 这是indexloc提供的php浏览器服务，不要输入任何密码和下载