• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

[SVG] Halbtransparente Flächen und Farbverläufe werden nicht (richtig) dargestellt

New Here ,
Nov 20, 2024 Nov 20, 2024

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.

TOPICS
Bug , Import and export

Views

243

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe
Community Expert ,
Nov 20, 2024 Nov 20, 2024

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 20, 2024 Nov 20, 2024

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.)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 20, 2024 Nov 20, 2024

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 21, 2024 Nov 21, 2024

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 21, 2024 Nov 21, 2024

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.)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Nov 22, 2024 Nov 22, 2024

Copy link to clipboard

Copied

Hi @Matthias27238120hq17,

 

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 25, 2024 Nov 25, 2024

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 25, 2024 Nov 25, 2024

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.)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Nov 25, 2024 Nov 25, 2024

Copy link to clipboard

Copied

LATEST

Hello @Matthias27238120hq17,

Thanks for sharing the details. Kindly allow me some time to check this with the team.

Anubhav

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines