All\u00a0SVG filters\u00a0are defined inside a <defs> element. The <defs> element is a short form of definitions. It contains a definition of specific elements like filters. The <filter> element defines an SVG filter. This element has an\u00a0id\u00a0attribute (required) identifying the filter.<\/p>\n\n\n\n
To create drop shadows, use the <feOffset> element. You will need to take an SVG graphic and move it in the xy plane.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <svg width=\"150\" height=\"150\">\n <defs>\n <filter id=\"filter\" x=\"0\" y=\"0\" width=\"150%\" height=\"150%\">\n <feOffset result=\"offOut\" in=\"SourceGraphic\" dx=\"30\" dy=\"30\" \/>\n <feBlend in=\"SourceGraphic\" in2=\"offOut\" mode=\"normal\" \/>\n <\/filter>\n <\/defs>\n <rect width=\"110\" height=\"110\" stroke=\"purple\" stroke-width=\"5\" fill=\"pink\" \n filter=\"url(#filter)\" \/> \n Sorry, your browser doesn't support inline SVG.\n <\/svg>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nIn the above-mentioned example, the <filter> element\u2019s id attribute specifies a unique name for the filter, and the <rect> element\u2019s filter attribute links the element to the “filter” filter.<\/p>\n\n\n\n
Example of the SVG <feGaussianBlur> element:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <svg width=\"200\" height=\"200\">\n <defs>\n <filter id=\"filter\" x=\"0\" y=\"0\" width=\"250%\" height=\"250%\">\n <feOffset result=\"offOut\" in=\"SourceGraphic\" dx=\"30\" dy=\"30\" \/>\n <feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"10\" \/>\n <feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" \/>\n <\/filter>\n <\/defs>\n <rect width=\"150\" height=\"150\" stroke=\"coral\" stroke-width=\"5\" fill=\"pink\" \n filter=\"url(#filter)\" \/> \n Sorry, your browser doesn't support inline SVG.\n <\/svg>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nHere, it is possible to blur the offset image with the <feGaussianBlur> element. This element\u2019s stdDeviation attribute specifies the amount of blur.<\/p>\n\n\n\n
In the following example, the <feOffset> element\u2019s in attribute is changed to “SourceAlpha”. It uses the Alpha channel to apply blur instead of the whole RGBA pixel.<\/p>\n\n\n\n
Example of coloring the shadow:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <svg height=\"200\" width=\"200\">\n <defs>\n <filter id=\"filter\" x=\"0\" y=\"0\" width=\"150%\" height=\"150%\">\n <feOffset result=\"offOut\" in=\"SourceAlpha\" dx=\"15\" dy=\"15\" \/>\n <feGaussianBlur result=\"blurOut\" in=\"offOut\" stdDeviation=\"8\" \/>\n <feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" \/>\n <\/filter>\n <\/defs>\n <rect width=\"120\" height=\"120\" stroke=\"purple\" stroke-width=\"5\" fill=\"pink\" \n filter=\"url(#filter)\" \/> \n Sorry, your browser doesn't support inline SVG.\n <\/svg>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nTo transform the colors in the offset image, use the <feColorMatrix> element.<\/p>\n\n\n\n
Example of the<feColorMatrix> element:<\/h3>\n\n\n\n<!DOCTYPE html>\n<html>\n <head>\n <title>Title of the document<\/title>\n <\/head>\n <body>\n <svg height=\"200\" width=\"200\">\n <defs>\n <filter id=\"filter\" x=\"0\" y=\"0\" width=\"150%\" height=\"150%\">\n <feOffset result=\"offOut\" in=\"SourceGraphic\" dx=\"25\" dy=\"25\" \/>\n <feColorMatrix result=\"matrixOut\" in=\"offOut\" type=\"matrix\" \n values=\"0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0\" \/>\n <feGaussianBlur result=\"blurOut\" in=\"matrixOut\" stdDeviation=\"9\" \/>\n <feBlend in=\"SourceGraphic\" in2=\"blurOut\" mode=\"normal\" \/>\n <\/filter>\n <\/defs>\n <rect width=\"150\" height=\"150\" stroke=\"purple\" stroke-width=\"5\" fill=\"lightblue\" \n filter=\"url(#filter)\" \/> \n Sorry, your browser doesn't support inline SVG.\n <\/svg>\n <\/body>\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Description of SVG filters All\u00a0SVG filters\u00a0are defined inside a <defs> element. The <defs> element is a short form of definitions. It contains a definition of specific elements like filters. The <filter> element defines an SVG filter. This element has an\u00a0id\u00a0attribute (required) identifying the filter. To create drop shadows, use the <feOffset> element. You will need […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[574],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9315"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=9315"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9315\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=9315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=9315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=9315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}