<feOffset>

The <feOffset> tag is an SVG primitive used to offset an element.

It allows you to shift an element by modifying its position on the horizontal (dx) and vertical (dy) axes.

Think of <feOffset> as a way to "push" an element towards a specific direction, creating effects like shadows or highlights.

Structure and syntax of the <feOffset> tag

Structure

Imagine you are drawing a car, but you want to add a shadow to give it a sense of depth.

Just as you can draw a simple shadow manually, you can use <feOffset> to shift an element to create a shadow effect or any other displacement.

Basic example

Here is a simple example of using it:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="offsetExample">
            <feGaussianBlur in="SourceAlpha" stdDeviation="4" />
            <feOffset dx="10" dy="10" />
            <feMerge>
                <feMergeNode />
                <feMergeNode in="SourceGraphic" />
            </feMerge>
        </filter>
    </defs>

    <rect x="20" y="20" width="160" height="160" fill="blue" filter="url(#offsetExample)" />
</svg>

In this example:

• <feGaussianBlur> adds a blur effect to the source graphic.
• <feOffset> shifts this blur by 10 units to the right (dx="10") and 10 units down (dy="10").
• <feMerge> combines the blurred shadow with the original graphic.

Here is our result:

Best practices for <feOffset>

When using <feOffset>, always think about how it will affect your design.

If you are creating shadows, make sure all shadows in your design follow the same logical direction and intensity to ensure a cohesive look.

For example, if one shadow is offset 10 pixels to the right and 5 pixels down, other shadows in your design should follow the same logic. This helps maintain a consistent light source and direction in your design.

It is also important to test your design on different screen sizes and resolutions to ensure that the offsets do not disrupt the visual harmony of your elements.

Finally, avoid using excessively large offsets, as this can make your design look unnatural or disorganized.

Main attributes of <feOffset>

Browser compatibility

The <feOffset> tag is widely supported by all modern browsers: