SVG-Favicon benutzt kein CSS?

Guten Tag,

ich möchte folgendes (Logo.svg) SVG-Element als Favicon setzen:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     x="0px" 
     y="0px" 
     width="1134px" 
     height="702px" 
     viewBox="-36.12 -144.12 1134 702"
     enable-background="new -36.12 -144.12 1134 702" 
     xml:space="preserve">
    <polygon fill="red" points="556.56,0.84 574.8,39.96 193.68,445.56 18.24,445.8 0.24,406.32 459.48,56.04 "/>
    <polygon fill="red" points="801.479,0.84 819.72,39.96 438.6,445.56 263.16,445.8 245.16,406.32 704.399,56.04 "/>
    <polygon fill="red" points="1045.319,1.8 1063.56,40.92 682.439,446.52 507,446.76 489,407.28 948.239,57 "/>
    <polygon fill="blue" points="381.709,0.84 556.56,0.84 175.44,406.2 0.24,406.32 "/>
    <polygon fill="blue" points="626.63,0.84 801.479,0.84 420.36,406.2 245.16,406.32 "/>
    <polygon fill="blue" points="870.47,1.8 1045.319,1.8 664.2,407.16 489,407.28 "/>
</svg>

Jedoch verändert sich die Farbe nicht, sondern bleib nur schwarz.

Ich füge das Element im head so hinzu:

<link rel="icon" type="image/svg+xml" href="/Media/Images/Logo.svg">

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

glebkema

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

26.06.2020, 10:27

Nicht jeder Browser kann als favicon verwenden:
https://caniuse.com/#feat=link-icon-svg

Bild zum Beitrag

Für mich funktioniert Ihr Code in Chrome gut:

Bild zum Beitrag

P.S. Auch spricht dieser Artikel über interessante Tricks, die mit SVG-Favicon ausgeführt werden können:
SVG, Favicons, and All the Fun Things We Can Do With Them

Woher ich das weiß:Berufserfahrung – Ich erstelle Wordpress-Themes, Plugins und Online-calculator

RoyBlunk

Fragesteller

26.06.2020, 12:46

Danke für den Hinweis. Mein Problem liegt daran, dass meine CSS-Styles nicht in der SVG-Datei liegen sondern extern als [NAME].css gespeichert sind. Laut Google kann man auch keine css-Dateien in eine SVG-Datei einbinden also muss ich das irgendwie anders lösen.

glebkema

26.06.2020, 19:23

@RoyBlunk

Aber was möchten Sie mit CSS erreichen?

Stattdessen können Sie die Farben direkt in den Tags der SVG selbst ändern. Sie können beispielsweise Ihre SVG-Datei in "green.svg" kopieren und "green" anstelle von "blue" in die Tags "<polygon>" schreiben.

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1"
   xmlns="http://www.w3.org/2000/svg" 
   xmlns:xlink="http://www.w3.org/1999/xlink" 
   xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
   x="0px" 
   y="0px" 
   width="1134px" 
   height="702px" 
   viewBox="-36.12 -144.12 1134 702"
   enable-background="new -36.12 -144.12 1134 702" 
   xml:space="preserve">
  <polygon fill="red" points="556.56,0.84 574.8,39.96 193.68,445.56 18.24,445.8 0.24,406.32 459.48,56.04 "/>
  <polygon fill="red" points="801.479,0.84 819.72,39.96 438.6,445.56 263.16,445.8 245.16,406.32 704.399,56.04 "/>
  <polygon fill="red" points="1045.319,1.8 1063.56,40.92 682.439,446.52 507,446.76 489,407.28 948.239,57 "/>
  <polygon fill="green" points="381.709,0.84 556.56,0.84 175.44,406.2 0.24,406.32 "/>
  <polygon fill="green" points="626.63,0.84 801.479,0.84 420.36,406.2 245.16,406.32 "/>
  <polygon fill="green" points="870.47,1.8 1045.319,1.8 664.2,407.16 489,407.28 "/>
</svg>

RoyBlunk

Fragesteller

29.06.2020, 13:09

@glebkema

Mit einem Button kann man das Design der Seite ändern. Ein klick und alles was Rot ist wird blau. Das Favicon soll dabei miteinbezogen sein. Da SVG's eben solche fill-Attribute besitzen dachte ich mir, dass ich diese ganz einfach mit einer Variable besetzen kann. Jedoch scheint das so nicht umsetzbar zu sein.

glebkema

29.06.2020, 17:30

@RoyBlunk

Danke für die interessante Aufgabe!

Ich habe "Emojis as Favicons" ausprobiert und festgestellt, dass diese Methode auch für SVG Favicon verwendet werden kann.

Original Emojies-Demo:
https://000458870.codepen.website/

Meine SVG-Version:
http://glebkema.ru/tasks/favicon-svg/

Sie können auf die Schaltflächen klicken, um die Farbe des SVG-Favicons zu ändern.

RoyBlunk

Fragesteller

30.06.2020, 14:50

@glebkema

Das ist eine interessante Herangehensweise. Wäre bestimmt möglich mein Problem so irgendwie zu lösen. Ich habe mich jetzt dazu entschieden, für meine verschieden farbigen SVG's jeweils PNG's zu erstellen und diese füge ich einfach per JavaScript ein. Zudem sind diese Mthode auch für mehrere Browser zugänglich.

Niklas

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Webseite

26.06.2020, 08:31

Die SVG-Grafik ist nicht quadratisch. Deswegen würde ich es zuerst wie folgt probieren:

<link rel="icon" type="image/svg+xml" sizes="any" href="/Media/Images/Logo.svg">

Falls das nicht klappt, mach die SVG-Grafik mal quadratisch. :)

Woher ich das weiß:Studium / Ausbildung

RoyBlunk

Fragesteller

26.06.2020, 08:34

Das Problem ist ja nicht, dass mir das SVG nicht angezeigt wird. Die Polygone welche hier entweder rot oder blau dargestellt werden sollen, bleiben schwarz.

jsfiddle: https://jsfiddle.net/Lzojtd5w/1/

<p>WXÄ<svg width="0.5em" height="1em" viewBox="0 0 50 100"><polygon points="0,0 0,100 50,100 50,0" fill="currentColor"/></svg>gX</p>

<p>WXÄ<svg width="0.5em" height="0.8em" viewBox="0 0 50 80"><polygon points="0,0 0,80 50,80 50,0" fill="currentColor"/></svg>gX</p>

<p>WXÄ<svg width="0.5em" height="1,2em" viewBox="0 0 50 120"><polygon points="0,0 0,120 50,120 50,0" fill="currentColor"/></svg>gX</p>

Das schwarze Rechteck ist irgendwie ausgerichtet. Wie bekomme ich es so ausgerichtet, dass es die Textzeile vertikal komplett ausfüllt?

...zur Frage

Warum wird dieses SVG im CSS/HTML abgeschnitten?

Hallo,

ich habe ein SVG in mein HTML-Gerüst eingesetzt und mit CSS gestaltet. Weiß jemand, warum das SVG abgeschnitten wird?

Im SVG-Code habe ich eine stroke-width="2.5" angegeben. Je dünner desto weniger fällt das Abschneiden auf. Das SVG selbt ist mit width und height bei 100%. Selbst ein übergeordnetes DIV mit einem padding bewirkt nichts.

Das SVG scheint sich selbst nur ohne Linienstärke des Kreises zuzulassen. Das Bild unten ist nur zum Verständnis. Kein Screenshot aus dem Html-Ergebnis.

<div class="imgBox">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 96.125 96.125" enable-background="new 0 0 96.125 96.125" xml:space="preserve">
<pattern  x="-2" y="98" width="69" height="69" patternUnits="userSpaceOnUse" id="Polka_Dot_Pattern" viewBox="2.125 -70.896 69 69" overflow="visible"></pattern>
<circle id="Kreis" fill="#ffffff" fill-opacity=.1 stroke="#ffffff" stroke-width="2.5" cx="48.063" cy="48.063" r="47.813"/>
</svg>
</div>

...zur Frage

Einfaches JavaScript-Spiel per Tastendruck neu starten?

Wir hatten in der Schule den Auftrag ein einfaches JavaScript-Spiel zu programmieren. Ich will das Programm nun durch einen Druck auf die Taste "R" neu starten. Hier ist der Code:

let start,
ziel,
ballradius,
rgbFarbwerte,
x,
y;
function setup() {
  createCanvas(400, 400);
  background('black');
  stroke("white");
  start = circle(60, 390, 10);
  ziel = circle(40, 390, 10);
  ballradius = 2;
  x = 60;
  y = 390;
}
function draw() {
  //lösche bild
  background("black");
  //zeichne Spielfeld
  fill('white');
  stroke("white");
  rect(20, 300, 80, 100);
  rect(50, 300, 100, 60);
  rect(140, 260, 50, 100);
  rect(140, 240, 120, 40);
  rect(230, 170, 30, 100);
  rect(160, 160, 100, 30);
  rect(160, 40, 20, 120);
  rect(160, 40, 100, 10);
  rect(260, 1, 5, 49);
  //zeichne Start-,Endpunkt
  fill("blue");
  stroke("blue");
  circle(60, 390, 10);
  fill("red");
  stroke("red");
  circle(262.25, 10, 10);
  rgbFarbwerte = get(x, y);
  if (rgbFarbwerte[0] === 0 && rgbFarbwerte[1] === 0 && rgbFarbwerte[2] === 0) {
    background("red");
    console.clear();
    console.log("Game over");
  }
  if (rgbFarbwerte[0] === 255 && rgbFarbwerte[2] === 0) {
    background("green");
    console.clear();
    console.log("You win");
  }
  //zeichne Kreis
  stroke("lightgreen");
  fill("lightgreen");
  circle(x, y, 4);
  //steuere Kreis
  if (keyIsDown(68)) { //taste d -> nach rechts
    x = x + 2;
  }
  if (keyIsDown(65)) { //taste a -> nach links
    x = x - 2;
  }
  if (keyIsDown(87)) { // taste w -> nach oben
    y = y - 2;
  }
  if (keyIsDown(83)) { // taste s -> nach unten
    y = y + 2;
  }
}

...zur Frage

Zugriff auf svg Element in HTML gibt immer "null" zurück?

Hallo zusammen,

folgendes Problem:

Ich möchte aus meinem javascript Code zu laufzeit auf meine sonarGrafik.svg zugreifen können um deren Elemente zu manipulieren (oder neue hinzufügen zu können).

So sieht erstmal der ganze HTML Code aus:

<!DOCTYPE html>
<html>
<head>
    <title>Arduino Daten</title>
    <link rel="icon" href="data:,">
    <script src="scripts/script.js"></script>
    <link rel="stylesheet" href="styles/style.css"> 
</head>
<body>
    <object id = "svgObject" data="styles/sonarGrafik.svg" type="image/svg+xml"></object>
</body>
</html>

Der betroffene Teil in meinem javascript Code:

function insertDots(cx, cy) {
    const svgObject = document.getElementById("svgObject");
    console.log(svgObject.contentDocument) // hier erhalte ich in der Console immer "null"


    svgObject.addEventListener("load", function() {
        if (svgObject && svgObject.contentDocument) {
            const sonarSVG = svgObject.contentDocument.getElementById("sonar");
            console.log(sonarSVG);
        }
    });
}

(Die funktion insertDots(cx, cy) wird alle paar sekunden aufgerufen und ich erhalte in der Browser Konsole immer nur null. Dementsprechend ist die if Bedienung darunter auch nie wahr)

In meiner .svg Datei gibt es definitv die id= "sonar":

<svg id="sonar" width="700" height="700" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" fill="rgba(128, 128,   128, 0.25)" />
</svg>

So sieht meine Ordnerstruktur aus:

Website
│   SonarVisuallisierung.html
│
├── scripts
│       script.js
│
└── styles
        style.css
        sonarGrafik.svg

Gibt es irgendwo einen Fehler oder eine andere Möglichkeit auf die Elemente der .svg Datei über das script zuzugreifen? (Den Inhalt der .svg will ich ausgelagert lassen und nicht in das HTML einfügen wegen der Übersichtlichkeit)

Danke für alle Lösungsvorschläge.

...zur Frage

Favicon wird in Chrome nicht angezeigt

Ich erstelle für die Schule eine Website und wollte eine Favicon benutzen. So weit so gut. In Firefox wird es auch angezeigt aber in Chrome nicht, Ich habe auch schon die Cache gelöscht. Ich habe auch schon .png und .ico Dateien ausprobiert. Nichts funktioniert.

Ich danke im vor raus.

...zur Frage

Wie kann ich lernen eine SVG-Datei zu Programmieren?

...zur Frage

Nächste Schritte für Full Stack dev?

Hallo,

Ich bin auf der Suche nach einem genauen Weg oder Schritte die ich gehen kann nachdem ich mein ersten Full Stack Projekt mit Python Flask ( Backend) und Frontend ( plain HTML, CSS und JS) und Database mit MySQL fertig gecodet habe.

Was genau kann ich jetzt machen um weiter zu kommen. Mein Ziel ist es fähig zu sein komplette professionelle Websiten erstellen zu können die Industrie fähig sind, d.h. Für Firmen, restaurants etc. Oder halt einen job als Full Stack dev zu bekommen.

sollte ich anfangen ein CSS framework lernen, wie bootstrap oder tailwind, oder ist das nur für designer , pur Frontend devs wichtig.
Oder lieber Backend frameworks wie Node.js, oder frontend JS frameworks wir zb react.

Ich weiß einfach nicht genau wo ich weiter machen soll nachdem ich alle Grundlagen berherrsche.

...zur Frage

Hosting bei Auftragsprogrammierung von Webseiten?

Hallo,

ich spiele mit dem Gedanken überein Kleingewerbe oder Freelancertätigkeit Webseiten für Privat- oder Geschäftskunden zu programmieren.

Also das reine Frontend.

Wie läuft sowas in der Regel mit dem Hosting der Webseite.

Könnte ich verlangen, dass sich der Kunde selber um Domain, Webspace, Impressum , Darenschutz usw. (ggf. Backend) selber kümmert.

oder ist das direkt unprofessionell und von Erfolglosigkeit gekrönt?

Also weil der Kunde so gar keine Ahnung hat, ich aber ja nur 'ein wenig', weil ich ja hauptsächlich nur das Frontend bieten möchte? Aber er möchte vielleicht alles aus einer Hand, obwohl Frontend ja gar nichts unbedingt für Backend zuständig ist.

Ich meine, ich kenne ja die Grenzen und Zuständigkeiten unter Umständen besser als der Kunde, kann aber nur das bieten womit ich mich am besten auskenne.

Hoffe ihr versteht was ich meine😉

...zur Frage

Wie kann man eine SVG-Datei in CSS nach links zentrieren?

Hallo,

ich möchte gerne eine SVG-Datei in meiner Webseite einbinden. Ich habe diese auch schon über <object> in HTML eingefügt.

Das object hat die Klasse Welt und ist in CSS hinterlegt. Dort habe ich width und height auf 75%. Nun wird mir die SVG aber so ziemlich mittig auf der Webseite angegeben.

Wie kann ich diese nach links positionieren, damit ich rechts z.B. einen Text scheiben kann?

HTML:

<object class="Welt" data="BluePlanet.svg" type="image/svg+xml"></object>

CSS:

.Welt {
  width: 75%;
  height: 75%;
}

Danke schon einmal im Voraus. :)

...zur Frage

Plausibilitätsprüfung als jQuery Code?

Benötige für eine Ausgabe eine Plausibilitätsprüfung als jQuery Code um ein Alter zu überprüfen, bzw. einzutippen: Unter Geburtsdatum tippen man das Datum ein, und bei Jahr_Einrichtung soll man ein Alter (Zahl) eintippen, die zum Datum übereinstimmt.

Das heißt, wenn man ein Datum 23.06.2020 eintippt, kann man nur Zahlen von 1 bis 3 eintippen, ansonsten kommt es zu eine Fehlermeldung

<label for="Geburtsdatum"style="width:165px;">Geburtsdatum</label>
<input type="text" class="form-control" style="width: 129px;" style="max-width: 130px;" id="Geburtsdatum" name="Geburtsdatum" value="{if $pdf}{$values.Geburtsdatum}{/if}">
                                                    
                                                              
<label for="Jahr_Einrichtung" style="width: 120px;">Das Kind besucht seit</label>
input type="text" class="form-control" maxlength="2" style="width: 30px;"  name="Jahr_Einrichtung" value="{if $pdf}{$values.Jahr_Einrichtung}{/if}">

...zur Frage

Warum funktioniert dieser code nicht?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beta</title>
    <script>
        const bodyElement = document.querySelector("body");

        function setColorBlue() {
            bodyElement.background-color = "blue";
        };

        function setColorRed() {
            bodyElement.background-color = "red";
        };

        function setColorGreen() {
            bodyElement.background-color = "green";
        }
    </script>
</head>
<body>
    <div class="color-picker">
        <button onclick="setColorBlue()">Blue</button>
        <button onclick="setColorRed()">Red</button>
        <button onclick="setColorGreen()">Green</button>

    </div>
</body>
</html>

...zur Frage

React Js App Deployen auf Webserver?

Ich habe jetzt mit

 npm run build

einen Ordner namens "build", wenn ich den über den FTP Zugang hochlade und die URL aufrufe erscheint nur eine Leere Weiße Seite.

Jedoch wenn ich es über andere Anbieter Deploye die das für mich übernehmen dann funktioniert alles einwandfrei.

Wie genau kriege ich das auch hin ?
Nutze All Inkl.

...zur Frage

javascript hilfe dringendd?

Hallo zusammen!

Ich habe angefangen eine ToDoListe zu machen und bin schon fast fertig. Allerdings muss ich noch zwei Buttons fertigen und ich weiss nicht wie. Das erste Button ist "Delete All", dieser sollte alle Aufgaben (Aufgaben der ToDoListe) löschen. Das zweite ist "Change Status", dieser sollte, sofort alle Aufgaben wegstreichen oder zeigen dass diese Aufgaben gemacht worden sind. Ich hoffe auf eure Hilfen!

Bin schon richtig müde, und muss die Aufgaben schon bis morgen abschicken..

Dankeschön im Voraus!

const todoInput = document.querySelector(".todo-input");
const todoInputTwo = document.querySelector(".todo-input-two")
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
const filterOption = document.querySelector(".filter-todo");
const deleteAllTodos = document.querySelector(".deleteAll button")


document.addEventListener("DOMContentLoaded", getLocalTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);
filterOption.addEventListener("change", filterTodo);


function addTodo(event) {
    event.preventDefault();
    const todoDiv = document.createElement("div");
    todoDiv.classList.add("todo");
    const newTodo = document.createElement("li");
    newTodo.innerText = `${todoInput.value}, Date: ${todoInputTwo.value}`; 
    newTodo.classList.add("todo-item");
    todoDiv.appendChild(newTodo);
+
    saveLocalTodos(todoInput.value);
    
    const completedButton = document.createElement("button");
    completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
    completedButton.classList.add("complete-btn");
    todoDiv.appendChild(completedButton);


    const trashButton = document.createElement("button");
    trashButton.innerHTML = '<i class="fas fa-trash"></li>';
    trashButton.classList.add("trash-btn");
    todoDiv.appendChild(trashButton);
    
    todoList.appendChild(todoDiv);
    todoInput.value = "";
}


function deleteCheck(e) {
    const item = e.target;


    if(item.classList[0] === "trash-btn") {
        const todo = item.parentElement;
        todo.classList.add("slide");


        removeLocalTodos(todo);
        todo.addEventListener("transitionend", function() {
            todo.remove();
        });
    }


    if(item.classList[0] === "complete-btn") {
        const todo = item.parentElement;
        todo.classList.toggle("completed");
    }
}


function filterTodo(e) {
    const todos = todoList.childNodes;
    todos.forEach(function(todo) {
        switch(e.target.value) {
            case "all": 
                todo.style.display = "flex";
                break;
            case "completed": 
                if(todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
            case "incomplete":
                if(!todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
        }
    });
}


function saveLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.push(todo);
    localStorage.setItem("todos", JSON.stringify(todos));
}


function getLocalTodos() {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.forEach(function(todo) {
        const todoDiv = document.createElement("div");
        todoDiv.classList.add("todo");
        const newTodo = document.createElement("li");
        newTodo.innerText = todo;
        newTodo.classList.add("todo-item");
        todoDiv.appendChild(newTodo);


        const completedButton = document.createElement("button");
        completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
        completedButton.classList.add("complete-btn");
        todoDiv.appendChild(completedButton);


        const trashButton = document.createElement("button");
        trashButton.innerHTML = '<i class="fas fa-trash"></li>';
        trashButton.classList.add("trash-btn");
        todoDiv.appendChild(trashButton);


        todoList.appendChild(todoDiv);
    });
}


function removeLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }



  deleteAllTodos.addEventListener("click", removeAllTodos);



    const todoIndex = todo.children[0].innerText;
    todos.splice(todos.indexOf(todoIndex), 1);
    localStorage.setItem("todos", JSON.stringify(todos));
}

...zur Frage

Bootstrap erlaubt?

Darf man Bootstrap einfach so benutzen? Oder muss man irgendwas zum Thema Urheberrecht beachten? Muss man Bootstrap/ den Urheber irgendwie angeben? Darf man bootstrap auch einfach so kommerziell nutzen?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen