Copy link to clipboard
Copied
Hallo zusammen,
ich habe folgende Probleme:
1. Farbverläufe werden beim Speichern als SVG gar nicht oder nicht korrekt dargestellt.
2. Halbtransparente Farbflächen werden nicht dargestellt.
Das heißt - werden sie sehr wohl, wenn ich beim Ausspielen die CSS-Eigenschaft "Stilattribute (Entitätsreferenzen)" verwende. Bei den drei anderen Optionen (Präsentationsattribute, Stilattribute und Stilelemente) funktioniert es leider nicht.
Das Irritierende: Genau diese Option ist mit dem Warnvermerk versehen, dass sie veraltet sei und in Zukunft entfernt werde.
Daher meine Frage:
Gibt es in Zukunft keine Möglichkeit mehr, Farbverläufe und halbtransparente Flächen für ein SVG zu verwenden? Das kann ich mir eigentlich nicht vorstellen.
Daher: Mit welcher Optionskombination lassen sich besagte Eigenschaften auch mit einer der drei zukunftssicheren Speichermethoden erzielen? Was habe ich bei meinen Kombinationsversuchen übersehen?
Vielen Dank für eure Hilfe.
Copy link to clipboard
Copied
Um welche Art Verläufe handelt es sich?
Könnte man dazu Demodateien haben? AI in PDF umbenennen, dann lassen die sich hier hochladen.
Copy link to clipboard
Copied
Hm, gibt es da verschiedene Arten von Verläufen?
Leider kann ich die Datei hier nicht hochladen, da es sich um ein Kundenprojekt handelt und dieser nicht sehr begeistert davon wäre. 😉
Im Prinzip wird vermutlich auch ein neu angelegter Verlauf bzw. eine neutrale, halbtransparente Fläche ihren Dienst tun.
Dazu bräuchte es dann auch keine hochgeladene Datei.
(Zum Anlegen, Testen und Hochladen fehlt mir heute leider die Zeit. Sollte es keine weiteren Antworten hier geben, würde ich das aber natürlich tun.)
Copy link to clipboard
Copied
Es gibt lineare, radiale und Freiformverläufe.
Ja, eine Demodatei wäre gut. 95% der Leute hier sind kein Adobe Staff, sondern Freiwillige.
Copy link to clipboard
Copied
Sehr lästig!
Ich habe gerade eine neutrale Test-Datei erstellt - und (fast) alles hat beim Ausspielen als SVG tadellos funktioniert!
Nur der freie Verlauf wurde meist nicht richtig dargestellt; hier hat es nur mit der Einstellung "Präsentationsatrbute" geklappt.
Um der Ursache des problemlos auf die Spur zu kommen, habe ich mich deshalb doch entschlossen, die abgeänderten Original-Dateien hier hoch zu laden.
Bei der Kurve wurden sämtliche Hinweise auf ihre Bedeutung entfernt. Problematisch beim Ausspielen als SVG sind hier die halbtransparenten Farbflächen zwischen den Kurven.
Das zweiten Bild stellt eine Phase der Zellteilung dar und sollte ohne Sinnzusammenhang unverfänglich sein. Hier gehen beim Ausspielen als SVG die Verläufe auf den Chromosomen, den Vesikeln (die Kreise) und den Mitochondrien verloren bzw. verschieben sich.
Evtl. wichtig: Die Bilder der Zellteilung wurden uns als EPS-Dateien zur Verfügung gestellt und als solche in Illustrator importiert.
Der Vollständigkeit halber habe ich auch meinen neu erstellten SVG-Test mit hoch geladen.
Copy link to clipboard
Copied
Verflixte Korrekturfunktion. Es soll natürlich "Problems" und nicht "problemlos" heißen. Gibt es hier keine Editierungsmöglichkeit? (Und ich schreibe diesen Zusatz nur, weil der Fehler den Sinn des geschriebenen zu sehr entstellt.)
Copy link to clipboard
Copied
Thank you for providing detailed information and the test files—it’s very helpful!
•For Gradients: Try converting freeform gradients to linear or radial gradients before saving them as SVG. This ensures compatibility since freeform gradients are not universally supported in the SVG spec.
•For Transparency: Use “Style Attributes (Entity References)” for now if other methods don’t work as expected.
If that doesn't help, would you mind confirming the following:
• Are you encountering this behavior across all SVG viewers (e.g., multiple browsers, editors)?
• Have you tried rasterizing the problematic elements as a temporary workaround to preserve their appearance in SVG?
Feel free to share more insights; we’ll check with the Illustrator team.
Best regards,
Anshul Saini
Copy link to clipboard
Copied
Thanks for your reply, Anshul_Saini.
When Monika asked me about the gradients, I thought she was referring to some "fancy" features rather than the usual Illustrator options.
Surprisingly, the freeform is actually new to me. At least I've never felt compelled to investigate that third option, as the other two usually did what I needed them to do. But how does it convert to linear/radial?
The gradient created feels very special to me and seems to have little to do with the others, and my quick tests produced unsatisfactory results (= a bitmap of the gradient was created).
Regarding the transparency part of your answer:
I am aware of the "Style Attributes (Entity References)" option.
Since I don't know your German, let me repeat what was written. Basically, I am afraid that the option you recommend is marked as obsolete and will be removed in the future.
My question was basically how to deal with this if it is eventually implemented.
Your point about other browsers is interesting. I will have to look into it.
On the other hand, we have no control over which browsers our customers use. So knowing the results will be of limited use.
Rasterising the layer will probably solve the problem (especially the one with the gradient mentioned above). Unfortunately, it will remove the one reason for using SVGs in the first place: their small size and scalability.
Long story short, I would love it if your development team could find a way to support the features of the Style Attributes (Entity References) options in future iterations of Illustrator.
The fact that most of the described results actually worked in my tests is a source of great puzzlement and definitely reduces the impact of this request. In order to find the reason for the discrepancy, which was the main reason, I uploded the data.
Copy link to clipboard
Copied
Short Update: At least Firefox and Google Chrome feature the same results in displaying the SVGs in question.
As I am a "graphics guy" and not tasked to do app testing, I don't have other browsers installed on my machine.
(Btw - sorry for the wall of text above. It's the result of me pasting the text after copying it from DeepL.
I really whish, there would be an "edit"-option.)
Copy link to clipboard
Copied
Hello @Matthias27238120hq17,
Thanks for sharing the details. Kindly allow me some time to check this with the team.
Anubhav