When utilizing SVG 'use' icons with external references, Chrome may fail to display icons when viewing an HTML file locally

I'm currently experimenting with using SVG icons, following the guide found at https://css-tricks.com/svg-use-with-external-reference-take-2/

Here's how it appears:

<!-- EXTERNAL reference -->
<svg>
  <use xlink:href="sprite.svg#icon-1"></use>
</svg>

Everything is working fine for me except when I open the HTML file locally in Chrome.

In the developer tools, I receive this error message:

Unsafe attempt to load URL file:///D:/path/to/file/icon-defs.svg#icon-rocket from frame with URL file:///D:/path/to/file/index.html. 'file:' URLs are treated as unique security origins.

Is there a workaround for this issue? It's not a big problem for me since I mostly use Firefox, but I am creating documentation in HTML format that will be accessed by other users...

htmlcssgoogle-chromesvg

Answer №1

There really isn't a straightforward way to get around the file: security measure.

One solution could be to directly insert the SVG code into your HTML file using 

<use xlink:href="#icon-1" />
- just keep in mind that this may increase the size of your HTML document. However, since it's for documentation purposes rather than repeated online downloading, this might be an acceptable trade-off.

Regardless, make sure to optimize your SVG files. I highly recommend using this SVG optimizer as it has proven to be highly effective.

Answer №2

To initiate Chrome, use the command line parameter --disable-web-security

Make sure to avoid browsing the internet in general using Chrome when this option is enabled.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for displaying objects within an object using HTML?

I'm developing an app using Angular and Node.js. I have a complex data structure where one object (order) contains a list of objects (items), which in turn include another list of objects (product IDs). My goal is to properly display all this data wit ...

htmlnode.jsangularngfor

What is the best way to show only a section of a background in CSS?

Being a novice in HTML and CSS, I am facing the challenge of displaying an image as a banner with text overlay. Despite trying various methods, it seems impossible to achieve this directly with an image element, so I resorted to using CSS's background ...

htmlcssimagebootstrap-4image-size

Preventing PHP function calls from halting page loading without refreshing

I have encountered an issue while attempting to call a PHP function from my HTML code. My PHP script primarily connects to a Java server to request information about Twitter accounts. I am specifically asking for their profile picture's URL and their ...

phphtml

Using jQuery to swap out intricate background designs

I'm attempting to use jQuery to change the background-color of an element from: background: transparent linear-gradient(#C0B 45%, #C0B) to: background-color:#000; Unfortunately, my attempt to remove the background property with .removeAttr() has n ...

jquerycssbackground

Increase the size of the box-shadow so that it extends beyond the boundaries

Can we create a wider box-shadow in CSS than the actual HTML element it is being applied to, while maintaining the same height as the element? Increasing the spread of the shadow typically increases the height as well. In the provided code snippet, the max ...

htmlcss

How can I incorporate a transition into my modal with JavaScript in CSS?

I've recently started learning CSS and while I've come across similar topics, none have provided the solution to my specific problem. After spending 2 hours experimenting with various CSS properties like hidden, transition, and display, I am now ...

javascripthtmlcss

Instability detected in the image when hovering over and off

Here is a snippet of code from my HTML file: <img id="id1" src="photo1" usemap="#ir" > <img src="photo2" id="id2"/> <span> <map name="ir" id="ir"> <area alt="" title="my title" href="my link" shape="poly" coords="13,15,29 ...

jqueryhtmlcss

Having difficulty positioning menu items beside the logo

I am facing an issue with aligning my menu items next to the logo in my navbar. Currently, the menu items are positioned slightly below and to the right of the logo. Although the horizontal alignment is correct, I need to adjust the vertical positioning to ...

htmlcssnavigation

Using .prev in conjunction with a Meteor event

Yesterday I inquired about how to remove the input preceding my button, as mentioned here: How to remove the input element before my button?. I received a solution that worked in the snippet provided. However, when trying to implement it in my event, I fou ...

javascriptjqueryhtmlmeteor

AngularJS $compile function is failing to render a custom template

Hi there, I am facing an issue while trying to render a custom template using the $compile function. The error message I keep getting is: unrecognized expression: {{senddata}} I have provided my code below for reference: app.controller('MainCtrl&ap ...

javascripthtmlangularjs

modify the appearance of HTML controls in real time with C#

Is there a way to dynamically add an additional navigation item to my website's menu list when the admin logs in through admin.aspx? The menu list is created using HTML controls such as <ul>...<li>, and I would like the new navigation item ...

c#htmlcssasp.net

How can I apply justify-content exclusively to the first row with Bootstrap 4?

I need a solution where the rows generated dynamically within a div are centered only if it is the first row. If there is only one row and the elements in that row do not fill up to the specified Bootstrap class properties col-xl-3 col-lg-4 col-md-6 col-sm ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

Tips for assigning a class to a div based on the route in Angular

In my angular template, I have a basic ng-repeat with some div elements. Now, I am looking to add a class to a specific div if the $routeParams.userId matches the id of the object in the loop. You can refer to the second line of code below for clarificatio ...

javascripthtmlcssangularjstemplates

The styling of my Bootstrap Datepicker clashes with the appearance of my table

I recently made some changes to my table to give it a sticky header with scrollable functionality. However, this caused an issue with my Datepicker. Is there a way to resolve this conflict and keep them separate? Below is the code I added for the sticky h ...

htmlcssasp.netbootstrap-4

Problems revolving around the fundamental CSS drop-down menu concept

I'm struggling to center a CSS drop-down menu on my webpage without causing the drop-down effect to break. No matter what I try, it seems to mess up. What am I missing? Snippet of code: html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,b ...

cssdrop-down-menucentering

trouble concerning the responsiveness of a jQuery popup

Hello, I am trying to create a responsive login popup using jQuery but have been struggling for a week. Below is the code snippet that I have been working on. Any help or guidance would be greatly appreciated. //scriptLogin.js archive $(document).ready ...

javascriptjquerycsshtmltwitter-bootstrap-3

utilize javascript to parse and access data from the xml.aspx file

After using F12 in Firefox, an error "NS_ERROR_FAILURE" appeared for html:16 (xml.send();). The opensource website suggests using HTTPS request method: GET. Why is there an error even when following these instructions? Any insight is appreciated. Thanks! ...

javascripthtmlasp.netxml

Display unique menus for both users and administrators

I have been researching extensively to find a solution to my problem, but I am struggling to make things work properly. Here is the code I currently have: Login script: $submitted_username = ''; if(!empty($_POST)) { ...

phphtmlmysql

Scrolling on a div can be used to create a looping magnification or scaling

Is there a way to create a seamless loop between #box2 and #box using this fiddle? I want them to reveal themselves in a continuous loop with infinite scroll. Each time one box fills the frame, the next one should appear in the distance, repeating indefini ...

javascripthtmlcss

Tips for incorporating CSS 4 custom properties into Angular components

Exploring the new possibilities of CSS 4 with custom properties, my goal is to utilize them in Angular. Traditionally, custom properties are used in the following manner: <div style="--custom:red;"> <div style="background-color: var(--custom ...

cssangular