
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create an SVG Drop Shadow?
A drop shadow enhances appearance of an SVG by giving it a 3D effect or a sense of depth, SVG drop shadows can be created using SVG filters and box-shadow or filter property.
- SVG Filters: Provides fine-grained control over shadow properties.
- CSS box-shadow or filter: Applies shadows using simpler syntax.
Approaches to Create an SVG Drop Shadow
Using the <filter> Element in SVG
This is a powerful approach that allows for detailed control over shadow effects, including blur, offsets, and color adjustments, SVG filters define graphical effects applied to elements, and the <feDropShadow>, filter primitive simplifies creating drop shadows.
Example Code
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="dropShadow" x="0" y="0" width="200%" height="200%"> <feDropShadow dx="5" dy="5" stdDeviation="4" flood-color="black" flood-opacity="0.5" /> </filter> </defs> <circle cx="50" cy="50" r="40" fill="green" filter="url(#dropShadow)" /> </svg> </body> </html>
Output
Using CSS filter
You can apply CSS filter: drop-shadow; to SVG elements, the filter: drop-shadow CSS property is simpler than using SVG filters and is applied directly via a CSS stylesheet or style attribute.
Example Code
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="40" fill="green" style="filter: drop-shadow(5px 5px 4px rgba(0,0,0,0.5));" /> </svg> </body> </html>
Output
Advertisements