The visual effect of SVG feColorMatrix filter appears distinct from that of CSS filter (sepia)

After researching on , I discovered that SVG filters, specifically using feColorMatrix, can be used to create a sepia effect.

Despite following the instructions, I encountered difficulty in reproducing the desired image effect and am seeking clarification on what could have gone wrong. Below is the HTML code I utilized:

<svg width="640" height="550" viewBox="0 0 640 550">
    <defs>
        <filter id="matrix-sepia">
            <feColorMatrix type="matrix"
                           values="
            0.393 0.769 0.189 0 0
            0.349 0.686 0.168 0 0
            0.272 0.534 0.131 0 0
            0 0 0 1 0"/>
        </filter>
    </defs>
    <image x="10" y="10" width="280" height="350" filter="sepia(1)" xlink:href="http://upload.wikimedia.org/wikipedia/commons/8/82/Siberian-larch.jpg"/>
    <image x="310" y="10" width="280" height="350" filter="url(#matrix-sepia)" xlink:href="http://upload.wikimedia.org/wikipedia/commons/8/82/Siberian-larch.jpg"/>
</svg>

https://jsfiddle.net/fLdu1rp8/8/

Your insights are greatly appreciated!

csssvg-filters

Answer №1

I've found the solution to my problem. The <filter> tag has a color-interpolation-filters attribute which defaults to linearRGB. (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/color-interpolation-filters)

When setting the value to sRGB, the resulting image looks the same as the CSS sepia filter one.

<svg width="640" height="550" viewBox="0 0 640 550">
    <defs>
        <filter id="matrix-sepia"
                color-interpolation-filters="sRGB">
            <feColorMatrix type="matrix"
                           values="
            0.393 0.769 0.189 0 0
            0.349 0.686 0.168 0 0
            0.272 0.534 0.131 0 0
            0 0 0 1 0"/>
        </filter>
    </defs>
    <image x="10" y="10" width="280" height="350" filter="sepia(1)" xlink:href="http://upload.wikimedia.org/wikipedia/commons/8/82/Siberian-larch.jpg"/>
    <image x="310" y="10" width="280" height="350" filter="url(#matrix-sepia)" xlink:href="http://upload.wikimedia.org/wikipedia/commons/8/82/Siberian-larch.jpg"/>
</svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting Flexbox Sticky Footer: Issue with 'Flex: 1' not properly filling the height

Currently experimenting with the flexbox sticky footer technique to create a dynamic-height footer, which has been a challenge for me. However, I'm facing an issue where the main section does not expand to fill the entire height of the window even aft ...

htmlcssflexboxsticky-footer

The text outside of the button is overridden by my CSS styling

I've been working on a simple card matching game and I decided to style the buttons to enhance their appearance. However, I'm facing an issue where the styling code has caused the text to appear outside of the button. Whenever I try to adjust the ...

htmlcssbuttontext

What is the best way to ensure that all components within a Container automatically inherit its calculated width?

Check out my tab panel setup on Sencha fiddle. The buttons are dynamically added to a tabs container with a layout of hbox within a vbox. The width of the tabs container is determined by the flex property. I attempted to set each button's width to &a ...

javascripthtmlcssextjsextjs4

Find the line containing the selected text within a JavaScript code

I am working on a contentEditable div where users can enter multi-line text. I need to be able to inspect the line that the user is currently typing in when they press enter. Is there a way to retrieve the context of that specific line (or all lines)? Is ...

javascripthtmlcsstextselection

Should we experiment with CSS for IE: To hack or not to hack?

I am excited about trying out some eye-catching experimental CSS features like border-radius (rounded corners) and gradients to enhance the look of my webpage. However, it's disappointing that Internet Explorer does not yet support these features. Alt ...

cssinternet-explorer

Using HTML and CSS to generate an alpha mask on top of an image

I am currently working on a website and I am looking to create an effect where an image is masked by an overlay. The goal is to achieve a "fade out" effect, without any actual animation, but rather make it appear as if the image is gradually fading into th ...

javascripthtmlcssfademasking

What causes top margins to collapse while bottom margins remain intact?

Upon examining the demonstration below, it is evident that in the left-column, the top padding edge of .clearfix-using_display-table (the yellow section) and .clearfix-using_display-table p (the silver part) are touching. However, on the lower edge, for so ...

htmlcsslayoutcss-floatclearfix

Development of an Angular 4 application utilizing a bespoke HTML theme

I'm in the process of creating an Angular 4 project using Angular CLI and I need to incorporate a custom HTML theme. The theme includes CSS files, JS files, and font files. Where should I place all of these files? Should they go in the asset folder? O ...

javascriptcssangularthemes

Is it possible for me to include a static HTML/Javascript/jQuery file in WordPress?

My extensive HTML file contains Javascript, jQuery, c3.js, style.css, and normalize.css. I am wondering if I can include this file as a static HTML page within Wordpress. Say, for instance, the file is called calculator.html, and I want it to be accessib ...

javascriptjqueryhtmlcsswordpress

Splitting areas within a liquid vessel using bootstrap 5

My container is structured like this with divisions: <div class="container-fluid"> <div class="row"> <div class="col-3"> sidebar </div> <div class="col-7"> top slider </div> <di ...

htmlcsstwitter-bootstrapbootstrap-5

The datepicker in Angular Material refuses to open when used within a modal dialog box

I successfully integrated an angular material 2 date-picker into a bootstrap modal form: <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">{{title}}</h ...

htmlcsstwitter-bootstrapangularangular-material2

Tips for restricting text within a div container

Currently, on my to-do list website, I am facing an issue with displaying long event titles in a div on the home screen. The text overflows, and even though I have set the x-overflow to hidden, it's not providing the desired result. I have tried using ...

htmlcssdjangobootstrap-4

Emphasize a portion of a text / Apply formatting to a variable

I am facing an issue where I need to format only the date in a specific string. I have managed to extract the date and store it in a variable after isolating it from the original message. <div class="foo"><p> Click here now and get by January ...

javascriptjquerycssvariablessubstring

Is there a way to determine the negative horizontal shift of text within an HTML input element when it exceeds the horizontal boundaries?

On my website, I have a standard HTML input field for text input. To track the horizontal position of a specific word continuously, I have implemented a method using an invisible <span> element to display the content of the input field and then utili ...

javascripthtmlcssinput

Images refusing to display within the div

I am attempting to insert an image onto my website, however, I am encountering issues with the code I have written: div#planet { z-index: -10; width: 450px; height: 549px; position: absolute; background: url("https://example.com/im ...

htmlcss

The background image of the LI element is displayed behind the image within the list item

So, here is the outline of my HTML structure: <li class="block1"> <a title="Block 1 Title" href="get/wzTZKKrI1kQ"> <img height="150" width="200" alt="Block 1 Title" src="http://lorempixel.com/output/city-h-c-170-230-2.jpg"> ...

htmlcssimage

Page showing without banner

As I scroll down through my website, I want a specific banner to appear when I reach the contact page. The banner will show a goodbye message and give users the option to close it or keep it open. For example: (function() { requestAnimationFrame(fu ...

javascripthtmlcssweb-deployment

Incorrect height of div on iPhone 6 and 7 is observed when utilizing flexbox and setting the height to 100% dimensions

I'm experiencing an issue with the display on iOS devices, specifically iPhone 6 and 7. I am creating a news card layout where I set the content height to 100%. However, on these specific iPhone models, the height is being displayed incorrectly (as se ...

htmlioscssflexbox

An issue arising from code in Python, JavaScript, HTML, and CSS

I am currently studying JavaScript and Python and have encountered an issue with my code. I wrote a script that is supposed to create a file and input data into it, but the recv_data function is not functioning correctly - the file is not being created. Ca ...

javascriptpythonhtmlcsseel

Enhancing the appearance of a checkbox within a ReactJS setting

I'm having trouble customizing a checkbox in a ReactJS environment for IE11. I've tried various approaches, but nothing seems to work. Can anyone offer any advice? Here is the code snippet: CSS: .squared { input[type=checkbox] { bo ...

javascripthtmlcssreactjscheckbox