css/svg größeres Bild erstellen

Ich versuche, ein vorhandenes Bibliotheks-Hintergrundbild durch eine etwas größere Version zu ersetzen. Als Referenz ist es nur ein kleiner Ziehpunkt in der Ecke eines "ziehbaren" Elements. Bei näherer Betrachtung sehe ich die ursprünglichen Entwickler setzen nur ein wenig Hintergrund-Bild wie folgt:css/svg größeres Bild erstellen

position: absolute; 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/P…4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=) bottom right no-repeat; 
background-origin: content-box;

Ich frage mich, wie die data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/P…4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4= erzeugt wurde, und wenn es möglich ist, meinen eigene mit nur einen etwas größeren Griff zu machen. Ich habe Zugang zu Tools wie Photoshop/Illustrator, aber ich denke, das ist vielleicht Overkill. Ich möchte den kleinen grauen Griff machen, der in jeder Richtung vielleicht 5px größer ist. Ich bin nicht sicher, wo ich damit anfangen soll, jeder Rat ist willkommen. Vielen Dank!

Bearbeiten - hier ist es in einem codepen http://codepen.io/ajmajma/pen/NAmPQx

Quelle

2016-08-18 ajmajmajma

Das Bild war wahrscheinlich mit einem SVG-Editor (wie Photoshop oder Illustrator et al). Sie könnten wahrscheinlich eine Kombination von SVG-Attributen finden, um die gewünschte Größenanpassung zu erhalten. Sie könnten auch das Bild herunterladen, in Photoshop öffnen, es skalieren und die alte Datei ersetzen - obwohl Sie möglicherweise etwas über die Verwaltung der Codierungen (base64) wissen müssen, um dies zu tun. –

https://css-tricks.com/get-original-image-data-url/ –

Beachten Sie die Bilddaten URL scheint falsch –

Der ursprüngliche Entwickler eine clevere Technik namens Daten URI * eine unnötige Anforderung für eine Bildressource zu vermeiden. Dies geschieht mit der Syntax: data(mime-type;base64,base64-string).

Öffnen Sie ein Entwickler-Tools' Konsole in Ihrem Browser und führen Sie den folgenden Code (der Base64-String aus Ihrem Beispiel ist):

atob('PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=')

Das Ergebnis ist, wie der Browser das Bild sieht:

<?xml version="1.0" standalone="no"?> 
<!-- Generator: Adobe Fireworks CS6, Export SVG Extension by Aaron Beall (http://fireworks.abeall.com) . Version: 0.6.1 --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg id="Untitled-Page%201" viewBox="0 0 6 6" style="background-color:#ffffff00" version="1.1" 
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" 
    x="0px" y="0px" width="6px" height="6px" 
> 
    <g opacity="0.302"> 
     <path d="M 6 6 L 0 6 L 0 4.2 L 4 4.2 L 4.2 4.2 L 4.2 0 L 6 0 L 6 6 L 6 6 Z" fill="#000000"/> 
    </g> 
</svg>

Sie können den SVG-Code in jedem visuellen Editor oder nur textuell bearbeiten und dann in der Konsole des Browsers btoa('updated-svg-code') darauf ausführen. Wickeln Sie die resultierende Zeichenfolge mit data:image/svg+xml;base64,%UPDATED% und verwenden Sie es als background Bild.

Weitere Informationen zu atob und btoa JavaScript-Funktionen für base64 -manipulation, see an article at MDN.

* - Beachten Sie, dass der Preis für die Vermeidung einer zusätzlichen Anfrage eine Erhöhung der CSS-Dateigröße um 33% bedeutet. Dies wird jedoch normalerweise durch die Verwendung der GZIP-Komprimierung gemildert.

Quelle

2016-08-18 16:13:17

css/svg größeres Bild erstellen

Antwort

Verwandte Themen