Download the PHP package recrit/svg-style-scoper without Composer
On this page you can find all versions of the php package recrit/svg-style-scoper. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download recrit/svg-style-scoper
More information about recrit/svg-style-scoper
Files in recrit/svg-style-scoper
Package svg-style-scoper
Short Description Scope the styles within the SVG markup to avoid SVG the styles affecting other SVGs or other elements on the page.
License MIT
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package svg-style-scoper
svg-style-scoper
Scope the styles within an SVG's inline markup to avoid the styles affecting other inline SVGs or other elements on the page.
Problem
A website wants to allow users to upload SVG files and display them as inline SVG markup on the site. Content editors often use the same app to create the SVGs which leads to the same HTML classes being used in the SVG markup for multiple SVGs on the same page. The last inline SVG displayed on the page will override the styles of all other SVGs above it that use the same classes.
Example: All elements on the page using the class "cls-0" would have a white fill.
Solution
The style tag "scoped" attribute has been deprecated, so it cannot be used to limit the scope of the SVG styles.
This library alters the SVG styles so that they only apply to the contents within the SVG.
- All style declarations within the SVG's style tag are appended with a hash. Specifically, only styles that start with a class and ID based styles. See below for all alterations to the SVG styles.
- The appended hash makes the styles unique to the SVG and any other placement of the exact same inline SVG displayed on the page.
- The appended hash preserves the original CSS selector specificity. Keeping the same specificity lets any page level styles (not in the SVG) to continue to work as expected. Page level style example: a site's theme changing the color of the SVG path.
Alterations to the SVG styles
| # | Original CSS | Altered CSS | Updated SVG inner element attributes | Goal |
|---|---|---|---|---|
| 1 | .cls-0 {} | .cls-0-HASH {} | class="cls-0-HASH" | Replace the class "cls-0". |
| 2 | .cls-1 + .cls-x {} | .cls-1-HASH + .cls-x {} | class="cls-1-HASH" | Replace the class "cls-1" only. |
| 3 | .cls-1 .cls-0 {} | .cls-1-HASH .cls-0-HASH {} | class="cls-0-HASH", class="cls-1-HASH" | Replace the class "cls-1" and "cls-0" since "cls-0" was replaced in #1 above. |
| 4 | #id-0 {} | #id-0-HASH {} | id="id-0-HASH" | Replace the ID "id-0". |
| 5 | path {} | REMOVED | none | Bad practice, eliminate the style. |
| 6 | * path {} | REMOVED | none | Bad practice, eliminate the style. |
All versions of svg-style-scoper with dependencies
ext-dom Version *
ext-libxml Version *