Shadow effects in SVG (Scalable Vector Graphics) can add depth and dimension to your images or graphics. There are various ways to apply shadow effects in SVG. Here are some commonly used techniques:
Drop Shadow using <filter>
element:
You can use the <filter>
element along with the feDropShadow
filter primitive to create a drop shadow effect. Here's an example:
xml<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="drop-shadow" x="0" y="0" width="150%" height="150%">
<feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="100" height="100" fill="#3498db" filter="url(#drop-shadow)" />
</svg>
In this example, a rect
element is used with a drop shadow filter applied to it. You can adjust parameters like dx
, dy
, stdDeviation
, and others to control the appearance of the shadow.
Text Shadow:
Applying a shadow to text elements is straightforward. You can use the text-shadow
CSS property directly in your SVG file. Here's an example:
xml<svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
<text x="10" y="40" font-family="Arial" font-size="20" fill="#3498db" style="text-shadow: 2px 2px 5px rgba(0,0,0,0.5);">
Hello SVG
</text>
</svg>
The text-shadow
property takes values for horizontal and vertical offsets, blur radius, and the color of the shadow.
Custom Shadow using Additional Shapes: You can create custom shadows using additional shapes behind your main element. For example, create a duplicate of your main shape, offset it slightly, and fill it with a color representing the shadow.
xml<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="100" fill="#3498db" />
<rect x="12" y="12" width="100" height="100" fill="rgba(0,0,0,0.5)" />
</svg>
In this example, the second rect
serves as a simple shadow for the first one.
Feel free to experiment with these techniques and adjust parameters to achieve the desired shadow effect in your SVG graphics.