Comments (4)
tanem
commented on August 18, 2024
1
@jaegz cool.
Just did some digging, apparently in Illustrator there's a CSS properties option you can change when exporting SVGs: http://articles.dappergentlemen.com/2014/12/17/demystifying-illustrator-svg-css/. Hopefully you can use that to stop output of the external style element, and instead output inline styles so they don't leak everywhere.
I think the above in combination with svgo - plus perhaps one or two plugins - will get your SVGs to a decent point, before react-svg does it's loading.
Anyway, will close the issue for now. All the best 👍
from react-svg.
jaegz
commented on August 18, 2024
1
@tanem Thanks for the extra details on exporting out of Illustrator and going out of your way to do some digging!
from react-svg.
tanem
commented on August 18, 2024
Hey @jaegz. I see this as more of a build time / preprocessing step, rather than something that should be added to react-svg.
Some options I can think of:
- Changing the export process somehow, so instead of specifying
fillvia CSS, it gets specified via thefillattribute on the required elements. I'm not sure how to do this with Illustrator off the top of my head. - Cleaning up the SVGs via a build tool or script. Under the hood it would probably delegate to svgo. I actually recommend doing this anyway, otherwise you'll probably end up with a bunch more cruft in your SVGs.
- Manually adjusting things like you're doing, which gets annoying and doesn't scale well. This would be my least preferred option.
Out of curiosity, any chance you can paste that content into a comment so I can copy it? Wouldn't mind playing around with a couple things anyway.
from react-svg.
jaegz
commented on August 18, 2024
Hi @tanem thanks for getting back to me and I see what you're saying.
- It would be great if Illustrator took the layer name and used that as the class name.
- Definitely going to have a look at svgo, thanks for the suggestion.
- This is what I've went with for now. Luckily the svgs I'm currently dealing with aren't super complex and Sublime's Emmet is handy here.
Here's the svg content from the screenshot.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 161.2 126.8" style="enable-background:new 0 0 161.2 126.8;" xml:space="preserve">
<style type="text/css">
.st0{fill:#F1F1F1;}
.st1{fill:#2E87B0;}
.st2{fill:#256475;}
.st3{fill:#BFBFBF;}
.st4{fill:#0A3C53;}
.st5{fill:#9FA19E;}
</style>
<g>
<path class="st0" d="M161.2,39.9H0v81.5c0,1.4,0.5,2.8,1.6,3.8c1,1,2.4,1.6,3.8,1.6h150.5c1.4,0,2.8-0.5,3.8-1.6
c1-1,1.6-2.4,1.6-3.8V39.9z"/>
<path class="st1" d="M161.2,26.3c0-1.4-0.5-2.8-1.6-3.8c-1-1-2.4-1.6-3.8-1.6H5.4c-1.4,0-2.7,0.5-3.8,1.6c-1,1-1.6,2.4-1.6,3.8
v13.6h161.2V26.3z"/>
<path class="st2" d="M98.5,30.4c0-2-1.6-3.6-3.6-3.6H66.3c-2,0-3.6,1.6-3.6,3.6l0,0c0,2,1.6,3.6,3.6,3.6h28.7
C96.9,34,98.5,32.4,98.5,30.4L98.5,30.4z"/>
<g>
<g>
<rect x="12.6" y="52.6" class="st3" width="61.6" height="61.6"/>
<g>
<path class="st4" d="M43.4,93.2c-10.5,0-19,9.4-19,21h38.1C62.5,102.6,53.9,93.2,43.4,93.2z"/>
<path class="st4" d="M54.9,78.2c0,6.3-5.1,11.4-11.5,11.4c-6.2,0-11.4-5.1-11.4-11.4c0-6.3,5.1-11.4,11.4-11.4
C49.8,66.8,54.9,71.9,54.9,78.2z"/>
</g>
</g>
<g>
<rect x="86.9" y="109.5" class="st3" width="30.8" height="4.7"/>
<rect x="86.9" y="100" class="st3" width="61.6" height="4.7"/>
<rect x="86.9" y="90.5" class="st3" width="61.6" height="4.7"/>
<rect x="86.9" y="81" class="st3" width="61.6" height="4.7"/>
</g>
<rect x="86.9" y="52.6" class="st4" width="61.6" height="14.2"/>
</g>
<path class="st5" d="M88.2,3.1C86.1,1,83.4,0,80.6,0c-2.8,0-5.5,1-7.6,3.1c-2.1,2.1-3.1,4.8-3.1,7.6v19.7h21.5V10.7
C91.3,8,90.3,5.2,88.2,3.1z M80.6,15.2c-2.5,0-4.5-2-4.5-4.5c0-2.5,2-4.5,4.5-4.5c2.5,0,4.5,2,4.5,4.5
C85.1,13.2,83.1,15.2,80.6,15.2z"/>
</g>
</svg>
from react-svg.
Related Issues (20)
- NextJS issues. HOT 2
- Gatsby / build execution HOT 1
- Jest unit testing HOT 3
- Components don't work properly in iframe
- Components don't work properly in iframe HOT 4
- <style>-tag inside SVG becomes a page-wide style HOT 2
- Setting color HOT 3
- src prop warning in unit testing react testing library HOT 2
- Re-render of react-svg lost reference HOT 2
- ref type is incompatible HOT 2
- React SVG isn't working, when we give the external source. HOT 2
- wrapper rendered twice HOT 2
- Unit test cases are failing, if i use ReactSVG. HOT 4
- Namespace 'React' has no exported member 'JSX'. HOT 3
- Styling in scss HOT 2
- Doesn't update <use /> tag "href" attribute when `renumerateIRIElements` is true HOT 2
- CORS issue HOT 4
- SVG URL EXTERNAL, How Can I mock!? HOT 2
- ForwardedRef not assignable to ref type
- Make wrapper optional HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-svg.