Illustrator: Entfernen weißer Ränder von Kästchen nach Objektkarte erstellen

Ich versuche, ein 8-Bit-Höhlenbild in Illustrator für eine lustige kleine 404-Seite zu erstellen, habe aber Probleme beim Export. Die Datei in Illustrator sieht wie dieser Screenshot aus:

Höhle

Wenn ich das Bild jedoch als PNG exportiere, sehe ich weiße Kästchen um jedes Pixel des Bildes:Geben Sie hier die Bildbeschreibung ein

Ich habe das Bild auch als SVG exportiert, und die weißen Kästchen erscheinen auch dort. Es scheint so, weil jedes der rectElemente einen kleinen Abstand zwischen sich hat:

    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 692 466">
      <defs>
        <style>
          .cls-1 {
            fill: #ffebb2;
          }

          .cls-2 {
            fill: #ebd798;
          }

          .cls-3 {
            fill: #cbb076;
          }
        </style>
      </defs>
      <title>cave</title>
      <g>
        <rect class="cls-1" x="681.97" y="455.87" width="10.03" height="10.13"/>
        <rect class="cls-2" x="671.94" y="455.87" width="10.03" height="10.13"/>
        <rect class="cls-2" x="661.91" y="455.87" width="10.03" height="10.13"/>
        <rect class="cls-2" x="651.88" y="455.87" width="10.03" height="10.13"/>
        <rect class="cls-3" x="641.86" y="455.87" width="10.03" height="10.13"/>
        {...MORE SVG...}

Ich glaube, ich könnte dieses Problem mit etwas Skripting beheben, indem ich jedem Rect-Element eine schöne ganzzahlige Höhe und Breite gebe und dann jedes dieser Rects an einer perfekt runden Position auf der x-, y-Achse "einraste". Ich würde das Problem jedoch viel lieber in Illustrator beheben, da ich darin besser werden möchte.

Weiß jemand, wie ich die weißen Kästchen entfernen kann, die jedes Rect-Element im exportierten SVG umgeben? Ich habe es versucht Object -> Make Pixel Perfect, aber dadurch wurden noch größere weiße Kästchen um die exportierten Rects herum erstellt. Jede Hilfe, die andere leisten können, wäre sehr hilfreich!

Antworten (3)

Nachdem ich einen Moment darüber nachgedacht hatte, wurde mir klar, dass diese weißen Kästchen das Ergebnis des strokeStils der rectElemente sein könnten. Ich öffnete mein SVG und fügte rect {stroke:red};die Inline-Stile hinzu und tatsächlich sah ich das ganze Raster aufleuchten:

<svg data-name="Layer 1" id="Layer_1" viewbox="0 0 692 466" xmlns="http://www.w3.org/2000/svg">
   <defs>
    <style>
    rect {
      stroke: red;
    }

    .cls-1 {
        fill: #ffebb2;
      }

Geben Sie hier die Bildbeschreibung ein

Dies sagte mir, dass die Strichstile diesen Gittereffekt erzeugten. Von da an wurde mir klar, dass das Raster verschwinden würde, wenn ich das Strichattribut jedes Elements auf seine Füllfarbe setzen würde, und das tat es tatsächlich:

<svg data-name="Cave" id="cave" viewbox="0 0 692 466" xmlns="http://www.w3.org/2000/svg">
   <defs>
    <style>
     .cls-1 {
        fill: #ffebb2;
        stroke: #ffebb2;
      }

      .cls-2 {
        fill: #ebd798;
        stroke: #ebd798;
      }

Hier ist das SVG in Chrome:Geben Sie hier die Bildbeschreibung ein

Ich würde immer noch gerne wissen, wie man das in Illustrator macht, bin aber froh, es geklappt zu haben.

Das Problem ist nicht der Strich, sondern ein Rendering-Artefakt (siehe z. B. Abstand zwischen 2 Pfaden in Illustrator und Objekte werden in Illustrator CC nicht genau ausgerichtet und Bild sieht bei der Konvertierung in SVG geprägt aus und viele andere frühere Fragen) ... Einstellung Ein Strich in der gleichen Farbe wie Ihre Füllung ist jedoch eine absolut gute Lösung :)
Danke @Cai, wie würde man dieses Problem in Illustrator beheben, damit das exportierte Ergebnis keine weißen Kästchen in den SVGs hätte?

Versuchen Sie, die Vektorboxen am Pixelraster auszurichten, indem Sie das Ganze auswählen und die Option "An Pixelraster ausrichten" finden. Es kann die Lösung sein oder auch nicht.

Ich kann zwei Möglichkeiten zeigen, wie es geht. Diese sind im Bild unten beschrieben.

Geben Sie hier die Bildbeschreibung ein

Illustrator: Entfernen weißer Ränder von Kästchen nach Objektkarte erstellen
AntwortenHierDatenschutz-Bestimmungen1y, 0v