Laden...

SVG einbinden, verschiedene Größen

Erstellt von Duesmannr vor 6 Jahren Letzter Beitrag vor 2 Jahren 9.695 Views
D
Duesmannr Themenstarter:in
161 Beiträge seit 2017
vor 6 Jahren
SVG einbinden, verschiedene Größen

Guten abend,
ich benutze ich meinem Programm Svg Dateien, da Sie kein Qualitätverlust haben.
Ich habe alle meine Svg Dateien ca. unter 50x50 Pixel erstellt.
Die Bibliothek die ich benutze ist die: https://github.com/vvvv/SVG

Nun habe ich eine PictureBox die 55x55 Pixel groß ist und benutze den folgenden Code:


Svg.SvgDocument doc = Svg.SvgDocument.Open(Path + "Play.svg");
picPlay.BackgroundImage = doc.Draw();

Das funktioniert auch. Habe nun jedoch auch eine PictureBox von einer Größe von 40x40 Pixel und benutze den gleichen Code.

Im Anhang grafisch dargestellt. Habt ihr Ideen?
Hatte erst daran gedacht, das Foto zu skalieren aber wüsste nicht wie mit der Bibliothek.

Mit freundlichen Grüßen

5.657 Beiträge seit 2006
vor 6 Jahren

Hi Duesmannr,

[Edit] Diese Tips würde ich dir geben, wenn du WPF verwenden würdest 😉 [/Edit]

verwende lieber XAML-Grafiken, die werden von WPF bereits unterstützt und erfordern keine externen Bibliotheken. SVGs lassen sich in XAML umwandeln.

Vektorgrafiken sind frei skalierbar und können sich an die Größe des Steuerelements anpassen, je nach Einstellungen für die HorizontalAlignment- und VerticalAlignment-Eigenschaften.

Verwende für die Benutzeraktionen Buttons anstatt PictureBoxen.

Verwende XAML und DataBinding, anstatt die Steuerelemente im Code-Behind zu erstellen.

Weeks of programming can save you hours of planning

D
Duesmannr Themenstarter:in
161 Beiträge seit 2017
vor 6 Jahren

@MrSparkle

ich würde was anderen verwenden, wenn ich WPF benutzen würde.
Ich benutze Winforms.

3.003 Beiträge seit 2006
vor 6 Jahren

Wenn ich mich richtig erinnere, zum skalieren einfach vor dem rendern width und height des svgdocument-objekts anpassen.

LaTino

"Furlow, is it always about money?"
"Is there anything else? I mean, how much sex can you have?"
"Don't know. I haven't maxed out yet."
(Furlow & Crichton, Farscape)

D
Duesmannr Themenstarter:in
161 Beiträge seit 2017
vor 6 Jahren

@LaTino

Width und Height kann man ja in der Draw Methode festsetzen.
Mein Ansatz ist dieser:


Svg.SvgDocument doc2 = Svg.SvgDocument.Open(Path + "Next.svg");
picNext.Image = doc.Draw(picNext.Width, picNext.Height);

Da passt der Vektor zwar in die PictureBox, aber nicht richtig, bzw. nicht mittig.

Und was dabei raus kommt:

T
461 Beiträge seit 2013
vor 6 Jahren

Hab ich jetzt etwas falsch verstanden?

genügt es nicht den PictureBox.SizeMode auf CenterImage zu stellen?

bzw. das BackgroundImageLayout auf Center?

Ich habe den Titel mal angepasst, so dass Suchende auch etwas damit anfangen können. EDIT: Ich sollte beim Wort "Shift" im Titel das "f" nicht vergessen... 😄

3.003 Beiträge seit 2006
vor 6 Jahren

Nein, ist richtig. Vorher möchte man das SVG noch in einer möglichst passenden Größe rendern, darum geht es. Ansonsten müsste man das gerenderte Bild skalieren, und dabei geht der einzige Vorteil von SVG flöten.

LaTino

"Furlow, is it always about money?"
"Is there anything else? I mean, how much sex can you have?"
"Don't know. I haven't maxed out yet."
(Furlow & Crichton, Farscape)

D
Duesmannr Themenstarter:in
161 Beiträge seit 2017
vor 6 Jahren

@ThomasE.

habe ich beides mal ausprobiert, funktioniert beides nicht. Warum kann ich dir nicht sagen.

@LaTino

Wie soll ich das denn in der richtigen Größe rendern?

3.003 Beiträge seit 2006
vor 6 Jahren

Wir reden aneinander vorbei, oder?

  • finde heraus, wieviel Platz dir in der Picturebox für dein Bild zur Verfügung steht (Hint: es ist NICHT PictureBox.Width/Height)
  • rendere das SVG mit Hilfe von Draw() in dieser Größe
  • setze die Quelle des Bildes der picBox auf den Output von Draw()

Ist jetzt nicht direkt Raketenwissenschaft 😉

LaTino
EDIT: Anhang.

"Furlow, is it always about money?"
"Is there anything else? I mean, how much sex can you have?"
"Don't know. I haven't maxed out yet."
(Furlow & Crichton, Farscape)

D
Duesmannr Themenstarter:in
161 Beiträge seit 2017
vor 6 Jahren

@LaTino

Macht Sinn was du sagst und das es keine "Raketenwisschenschaft" ist, ist mir kla 😄

Aber selbst, wenn ich den Code 1:1 wie du habe, funktioniert es nicht. Auch mit Überlegen komme ich nicht weiter.


 string Path = String.Format("{0}Resources\\Vector\\", System.IO.Path.GetFullPath(System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, @"..\..\")));
Svg.SvgDocument doc2 = Svg.SvgDocument.Open(Path + "test.svg");
pictureBox1.SizeMode = PictureBoxSizeMode.CenterImage;
pictureBox1.Image = doc2.Draw(pictureBox1.ClientSize.Width, pictureBox1.ClientSize.Height);

T
461 Beiträge seit 2013
vor 6 Jahren

Kann es sein, daß das Bild selbst im Originalen so aussieht?
Der Rand nach rechts und nach unten?

Denn wenn dem so ist, kannst lange nach einem Fehler im Code suchen 😉

Ich habe den Titel mal angepasst, so dass Suchende auch etwas damit anfangen können. EDIT: Ich sollte beim Wort "Shift" im Titel das "f" nicht vergessen... 😄

D
Duesmannr Themenstarter:in
161 Beiträge seit 2017
vor 6 Jahren

@ThomasE.

Eig. nicht. Das letzte Bild was ich hochgeladen habe, habe ich frisch von Flaticon heruntergeladen, um es an einer anderen Svg Datei auszutesten.

Und hier ein Bild von meinen selbst erstellten mit Illustrator. Die ich dann als .Svg exportiere.

5.657 Beiträge seit 2006
vor 6 Jahren

Du könntest dir das von der SVG-Bibliothek erzeugte Bitmap mal abspeichern, und dann anschauen, was dort erzeugt wurde.

Weeks of programming can save you hours of planning

D
Duesmannr Themenstarter:in
161 Beiträge seit 2017
vor 6 Jahren

@MrSparkle

~~Das was gezeichnet wird, passt ja, soweit ich es verstehe.
Aber warum das nicht richtig in der PictureBox angezeigt wird, verstehe ich nicht.

Und wenn ich das gezeichnete Bild speichere, wird das Symbol ganz normal angezeigt, zwar verpixelt, aber normal.~~

Wenn man das Foto von Windows löschen will, sieht man ja ein Vorschaubild und es sieht so aus, als wenn das Symbol auch oben links in der Ecke hängt. Also müsste ja was mit dem .Draw() was nicht passen.

Also im Endeffekt wird die Grafik bei mir nicht richtig gezeichnet.

5.657 Beiträge seit 2006
vor 6 Jahren

Das was gezeichnet wird, passt ja, soweit ich es verstehe.

Fehlt da nicht noch der Kreis außen herum?

Bevor du den Fehler in der verwendeten Bibliothek suchst, würde ich erstmal ein Problem mit deinem SVG in Betracht ziehen. Kannst du nicht mal das originale SVG und das von der Draw-Methode gerenderte Bitmap hier anhängen? Dann kann man sich das mal genauer anschauen, anstatt nur Vermutungen anzustellen.

Weeks of programming can save you hours of planning

D
Duesmannr Themenstarter:in
161 Beiträge seit 2017
vor 6 Jahren

Fehlt da nicht noch der Kreis außen herum?

@ThomasE.

Eig. nicht. Das letzte Bild was ich hochgeladen habe, habe ich frisch von Flaticon heruntergeladen, um es an einer anderen Svg Datei auszutesten.

In dem .rar Archiv ist jetzt einmal die originale .Svg Datei und einmal die gezeichnete Bitmap Datei. Die gezeichnete Datei, muss man nicht öffnen, da man kaum was sieht, weil die kein Hintergrund hat. Wenn du die einfach markierst siehst du, dass das gezeichnete Bild oben links in der Ecke ist.

5.657 Beiträge seit 2006
vor 6 Jahren

Hab mir die Dateien angeschaut, und kann leider auch nicht erkennen, wo der Rand herkommt.

Eventuell liegt es an dieser Codezeile in der Draw(Bitmap)-Methode:

//EO, 2014-12-05: Requested to ensure proper zooming out (reduce size). Otherwise it clip the image.
this.Overflow = SvgOverflow.Auto;

Allerdings kann ich nicht erkennen, was genau dabei passiert.

Ich würde mich an deiner Stelle mal an die Entwickler der Bibliothek wenden. Oder eine andere Bibliothek ausprobieren.

Weeks of programming can save you hours of planning

D
Duesmannr Themenstarter:in
161 Beiträge seit 2017
vor 6 Jahren

@MrSparkle

Aufjedenfall danke. Naja alles Pfusch hier.. 😄

Werde mein Projekt einfach in Wpf übertragen, auch wenn ich von Xaml keine Ahnung habe, aber ja 😃

3.003 Beiträge seit 2006
vor 6 Jahren

Es gibt direkt svg2xaml-Konverter. Die Möglichkeit, die Grafik direkt im View zu zeichnen, finde ich schon recht cool bei WPF. Abgesehen davon schau ich mir das morgen nochmal an, lässt mir keine ruhe.die lib sollte so Probleme nicht haben.

LaTino

"Furlow, is it always about money?"
"Is there anything else? I mean, how much sex can you have?"
"Don't know. I haven't maxed out yet."
(Furlow & Crichton, Farscape)

3.003 Beiträge seit 2006
vor 6 Jahren

Joar, hab mich von dir aufs Glatteis führen lassen.

@LaTino
Width und Height kann man ja in der Draw Methode festsetzen.

Was natürlich nicht stimmt, denn während doc.Width und doc.Height die Dimensionen des SVG festlegen, legt Draw(int, int) die Größe der Rasterung fest.

Also einfach mal das tun, was ich im allerersten Post schrieb, dann klappt's auch mit dem Nachbarn.

LaTino
EDIT: das ist der Grund, wieso man a) sich Dokumentationen genau anschaut und b) Vorschläge aus dem Forum erst einmal 1:1 probieren sollte, bevor man selbst kreativ wird.

"Furlow, is it always about money?"
"Is there anything else? I mean, how much sex can you have?"
"Don't know. I haven't maxed out yet."
(Furlow & Crichton, Farscape)

D
Duesmannr Themenstarter:in
161 Beiträge seit 2017
vor 6 Jahren

Joar, hab mich von dir aufs Glatteis führen lassen.

Beabsichtig war das nicht.
Und mit SvgDocument.Heigt/Width funktioniert es auch. Ich bedanke mich sehr bei dir 😃

3.003 Beiträge seit 2006
vor 6 Jahren

Beabsichtig war das nicht.

Natürlich nicht, ich hab' mich auch mehr über mich geärgert, dass ich bei der Aussage nicht misstrauisch geworden bin 😉.

Alles gut.

LaTino

"Furlow, is it always about money?"
"Is there anything else? I mean, how much sex can you have?"
"Don't know. I haven't maxed out yet."
(Furlow & Crichton, Farscape)

T
25 Beiträge seit 2015
vor 6 Jahren

Hallo,
Ich hoffe es ist nicht falsch dass ich keinen neuen Thread aufmache, weil ich habe quasi dieselbe Frage nur wesentlich simpler...

ich bin noch Anfänger was C# und programmieren im Allgemeinen angeht und habe auch schon einzelne externe dll-Dateien eingebunden, aber noch nie sowas rießiges gehabt wie diese Bibliothek.
Ich will eigentlich nur SVG-Dateien in meiner Form-Anwendung anzeigen (die SVG-Dateien werden von unserer Maschine benötigt, umwandeln ist also keine Option).
Ich habe diesen rießigen Ordner von hier herunter geladen: https://github.com/vvvv/SVG
Tja und jetzt habe ich null Ahnung wie ich das benutzen kann, ob ich was installieren muss oder ob ich auch wieder einfach nur eine dll-Datei zum einbinden angeben kann (und wo zur Hölle die dann liegt) - ich finde keine Anleitung und habe nie was mit Github zu tun gehabt, alles was ich sehe ist ein Ordner voll gestopft mit Dateien 🤔

4.931 Beiträge seit 2008
vor 6 Jahren

Entweder du kompilierst das Projekt direkt mittels "Source/Svg.sln" bzw. fügst es als Projekt "Source/Svg.csproj" zu deiner Solution hinzu oder aber du verwendest, wie dort beschrieben, den NuGet-Paketmanager (s. z.B. Installing NuGet client tools).

T
25 Beiträge seit 2015
vor 6 Jahren

Danke Th69!

Ich habe es jetzt soweit hinbekommen, dass ich die Svg-Bibliothek einbinden konnte.

Ich habe den obigen Code quasi kopiert und angepasst, aber meine pictureBox zeigt überhaupt nichts an. Der Code läuft aber definitiv durch das Event und es gibt auch keine Fehlermeldungen - es passiert also einfach nichts.


        public Form1()
        {
            InitializeComponent();

            DirectoryInfo dinfo = new DirectoryInfo("C:\\Temp\\In");
            FileInfo[] Files = dinfo.GetFiles("*.svg");
            foreach (FileInfo file in Files)
            {
                listBox1.Items.Add(file.Name);
            }
        }

        private void listBox1_SelectedValueChanged(object sender, EventArgs e)
        {
            var picturePath = "C:\\temp\\In\\"+listBox1.SelectedItem.ToString();

            SvgDocument doc = SvgDocument.Open(picturePath);
            pictureBox1.Image = doc.Draw(pictureBox1.ClientSize.Width, pictureBox1.ClientSize.Height);            
        }

Es sind 2 svg-Dateien vorhanden, die werden in der Listbox auch angezeigt. Daneben sollte die pictureBox beim klick auf das Item in der ListBox quasi eine Vorschau anzeigen.

Muss ich da irgendwas aktualisieren oder neu laden?

Die pictureBox:


            this.pictureBox1.BackgroundImageLayout = System.Windows.Forms.ImageLayout.Center;
            this.pictureBox1.Location = new System.Drawing.Point(285, 27);
            this.pictureBox1.Name = "pictureBox1";
            this.pictureBox1.Size = new System.Drawing.Size(285, 313);
            this.pictureBox1.SizeMode = System.Windows.Forms.PictureBoxSizeMode.CenterImage;
            this.pictureBox1.TabIndex = 4;
            this.pictureBox1.TabStop = false;

Tante Edith:

Keine Ahnung warum da nirgendwo was von im Internet steht, aber da ich keine großen Anforderungen stelle funktioniert das jetzt mit folgendem Code einwandfrei:


var picturePath = "C:\\temp\\In\\"+listBox1.SelectedItem.ToString();
webBrowser1.Navigate(new System.Uri("file://"+picturePath));

Es braucht nicht einmal eine externe Bibliothek...

S
1 Beiträge seit 2020
vor 4 Jahren

@Tician; danke für den sehr pragmatischen Tipp, einfach nur eine SVG anzeigen zu können

ich kann nur Delphi

F
1 Beiträge seit 2021
vor 2 Jahren

Hallo

Sorry wenn ich den alten Thread nochmals ausgrabe. Ein gespeichertes SVG-Bild in einer PictureBox anzuzeigen habe ich mittlerweile hingekriegt. Aber wie schaffe ich es, auch ein Bild aus dem Internet anzuzeigen?

Besten Dank für eure Hilfe

16.806 Beiträge seit 2008
vor 2 Jahren

Musst es vorher runterladen.