search

w3c / svgwg

SVG Working Group specifications
Other
695 stars 132 forks source link

SVG Params alternative: seamless #793

Open nuxodin opened 4 years ago

nuxodin commented 4 years ago

It would often be helpful if you could use css in external SVG images, and background images. One approach was this one: https://tabatkins.github.io/specs/svg-params/

I like the idea, but would like to use mostly CSS to change the appearance. My idea now is that similar to the once discussed seamless attribute for iframes, css is just forwarded.

<img src="image.svg" seamless style="color:red; --strongness:2">
image.svg:

<svg>
    <path style="fill: currentColor; stroke-width: var(--strongness)" ... />
</svg>

proposal for background-images:

img::background {
    background-image: url( image:svg );
    background-image-styles: seamless;
}

Security concerns

Width just injected CSS one can steal possible user-dependent CSS (--username : tina98)

Solution

Consider seamless only for same origin resources

longsonr commented 3 years ago

Seems the same as this: https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-context-properties with some renaming.

SebastianZ commented 1 month ago

Just for reference, @tabatkins' proposed SVG Params spec. got officially adopted by the CSSWG as CSS Linked Parameters spec.

Sebastian