According to https://webplatform.github.io/docs/css/functions/sepia/ we should be able to use SVG filters - specifically a feColorMatrix - to mimic a sepia effect.
I was unable to reproduce the exact image effect and was wondering what I was doing wrong. Here is my HTML:
<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/
Thanks!
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>