CODEWITHSUNDEEP
svg
guettli
guettli

Reputation: 27806

Antialiased effect on line in svg

I created a simple SVG: https://thomas-guettler.de/tmp/bust-in-silhouette.svg

The lines are "hard". I would like to have soft borders, like antialiased fonts look like.

How to do this?

Update: shape-rendering is not what I am looking for. I want to have the edge blured. Like this:

blured-line

Upvotes: 1

Views: 291

Answers (1)

Michael Rovinsky
Michael Rovinsky

Reputation: 7210

You can use feGaussianBlur filter:

<svg width="200" height="200">
<defs>
    <filter id="blur-filter" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1.5" />
    </filter>
  </defs>
  <g transform="translate(0,-70)">
    <circle style="fill:none;stroke:#e4e4e4;stroke-width:3" id="path12" cx="36.571712" cy="112.38668" r="14.648677" filter="url(#blur-filter)"/>
    <path id="path16" style="fill:none;stroke:#e4e4e4;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 44.558467,124.4381 c -0.785324,6.57119 12.819094,2.84752 14.563786,9.83637 -0.136789,8.75076 1.389218,15.51609 -1.00371,16.20504 -3.548352,3.55851 -37.719446,1.47838 -43.074237,-0.51107 -2.069788,-3.00382 -0.76269,-4.39621 -1.193106,-12.72626 0.649711,-9.64531 16.184933,-5.35944 15.200858,-11.71705" filter="url(#blur-filter)"/>
  </g>
</svg>

Upvotes: 1

Related Questions