Re: [csswg-drafts] [selectors] Styling Content in <img> Elements (#3730)

So, after that history lesson, what's next?

First thing: it is clear that modifying styles on embedded SVG images is a frequent desire. I didn't even touch on the ways people work around the limitation, e.g., [using filters to modify the color of a single-color icon](https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images).

**I am very much hoping that this will be one of the projects that gets picked up as an incubated spec discussion [in the SVG Community Group](https://www.w3.org/community/svgcg/).**

Wherever the discussion happens, here are some thoughts to get started:

## What types of situations should this styling approach cover?

- SVG loaded as `<img>` and CSS `background-image` (or other CSS image properties) both seem to get mentioned frequently.

- Ideally, a method for styling embedded SVG images would also work for styling image-like SVG effects (markers and patterns), which are rendered as image layers outside of the CSS inheritance tree of the document where they are used.

- It would be nice if the method could be harmonized with strategies for styling shadow DOM components (e.g., [`::theme()`](https://github.com/w3c/csswg-drafts/issues?utf8=%E2%9C%93&q=is%3Aopen+label%3Acss-shadow-parts-1+%22%3A%3Atheme%22)), although shadow DOM is slightly different in that it does inherit styles by default.  For SVG in particular, it would be nice to have more nuanced ways to customize `<use>` cloned content, especially when you're re-using assets defined in a separate file.

- This is the first time I've seen someone suggest that the same styling approaches could be used for other types of embedded documents — like HTML embedded in `<iframe>` — but I immediately like that idea.  I've had projects where I've injected piles of styles into iFrames created for shopping cart widgets, when all I really want is "please inherit the font from the webpage".

## Which document should control the properties that are passed through?

- Both the "parameter" model and the "context value" model were based on the assumption that the SVG would be intentionally designed to use values from the outside scope.

- But for a web dev using an SVG created by someone else (or dynamically generated iFrame content), I can see how it would be nice to want to override the styles on use without editing the inner document at all.

- Having the outside document set the default/inherited value for CSS properties used by the inner document is a bit of a compromise.  For simple SVG icons, you might not need any special code in the SVG file, just use default inherited styles.  For more complicated parameterization, the SVG file could use custom properties and `var()` to assign their values as needed.

- Either way, there could be cross-origin concerns that need to be considered.  You wouldn't want the server that provided the nested document to be able to access values from the outer scope that weren't intentionally passed to it, and you wouldn't want the outer document to be able to detect if the embedded content used passed-in style parameters, unless the embedded document expressly granted crossorigin permissions.

## Other design issues

- Should any values get transformed as they pass the document boundary? E.g., should lengths be adjusted to a different coordinate system?

- Is simple inheritance of values set on the embedding element enough, or should values be explicitly assigned to the embedded document?  If values are assigned to the document, what's the best way to do so: as part of the URL, as a separate attribute / parameter object, by using a pseudoelement, … ? 

-- 
GitHub Notification of comment by AmeliaBR
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3730#issuecomment-473076515 using your GitHub account

Received on Thursday, 14 March 2019 21:43:37 UTC