Illustrator - "real" inner shadow to SVG object

Wanted: An inset shadow (NOT inner glow) for a complex svg path, supporting following options:

  • shadow/light direction
  • shadow size
  • blur amount
  • opacity

Example Pic: Inset Shadow for SVG-Paths (SVG Effect)

1

Best Answer

select the svg object, open appearance toolbar, use this icon enter image description here at the bottom to add svg-filter

enter image description here

use "+" to add a new filter and copy following code

<filter id="inset-shadow"><feOffset dx="25" dy="25"></feOffset><feGaussianBlur result="offset-blur" stdDeviation="10"></feGaussianBlur><feComposite in="SourceGraphic" in2="offset-blur" operator="out" result="inverse"></feComposite><feFlood flood-color="black" flood-opacity=".75" result="color"></feFlood><feComposite in="color" in2="inverse" operator="in" result="shadow"></feComposite><feComposite in="shadow" in2="SourceGraphic" operator="over"></feComposite></filter>
  • dx="25" dy="25": shadow width
  • stdDeviation="10": blur width
  • flood-opacity=".75": opacity

Random Posts

Is it possible to download my app preview images from iTunesConnect?Merge stashed change with current changesHow to query first 10 rows and next time query other 10 rows from tableWindow inside windowWhat is a splunk query to get top elements from a list of strings?How to define a vector functionIs n or nlog(n) better than constant or logarithmic time?How do I solve the Coin Row problem using dynamic programming?What is pancake.apple.com?SQL Server CAST from varchar to numeric fails with errorPlot PCA loadings and loading in biplot in sklearn (like R's autoplot)spark: How does salting work in dealing with skewed dataUse terrform to update a KMS Key Policyhow to make an animation in pygame [duplicate]How do I start threads in plain C?GitHub Action workflow for running steps in parallelWhat does the argument mean in fig.add_subplot(111)?Update_Many Mongo Document with PymongoWhat is the difference between SearchContext and WebDriver interfaces in Selenium or what is the relationship between them?What does file:///android_asset/www/index.html mean?