Tips for extracting an SVG path from HTML structure

This example I'm referencing is by Chris Coyer

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" mlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">

<defs>
<g id="icon-image">
<path class="path1" d="M0 4v26h32v-26h-32zM30 28h-28v-22h28v22zM22 11c0-1.657 1.343-3 3-3s3 1.343 3 3c0 1.657-1.343 3-3 3-1.657 0-3-1.343-3-3zM28 26h-24l6-16 8 10 4-3z"></path>
</g>
</defs>
</svg>

<h1>
<svg viewBox="0 0 32 32">
    <use xlink:href="#icon-phone"></use>
 </svg>
Call me

However, I want to store the path definitions separately from the HTML so they can be used throughout the app.

Is there a way to achieve this without having to manually inject the svg using JavaScript?

I have explored various methods of embedding and linking SVG paths and files, but need to ensure that I can style them dynamically with currentColor. Using external SVG files in an img tag doesn't allow for this, as explained in detail in this blog post.

The closest solution I've found is the example above. However, I still prefer not to embed the path directly in the HTML. Is there a way to place it in an external file for reusability?

htmlcsssvg

Answer №1

One alternative is to transform SVG into a font format

If you search online for "convert SVG to font," you'll find numerous websites and tools that can help with this conversion, such as:

Additionally, "HTML entities" offer various reusable icons, among other resources.

Answer №2

There is just one option left to consider. You can avoid manually embedding the svg, bypass injecting it with javascript, and steer clear of using it in an img tag if you prefer to tweak the properties with css. Your best bet now would be to utilize your server-side language to inject it.

For instance, if you are working with php, you could easily output the content of your svg file wherever needed:

<?php echo file_get_contents(file_path); ?>

Answer №3

Exploring another innovative approach, I stumbled upon SVG Sprites, which are thoroughly explained by Chris Coyier

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style>
  .icon {
width: 125px;
height: 125px;
background: #eee;
      fill: currentColor;
}

body {
  padding: 20px;
}
</style>
</head>
<body>
<div style="color: red">
    <svg class="icon"><use xlink:href="menu.svg#beaker"/></svg>
</div>
<div style="color: brown">
    <svg class="icon"><use xlink:href="menu.svg#fish" /></svg>
</div>
</body>
</html>

This can be implemented with a separate file named menu.svg:

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>


<symbol id="fish" viewBox="0 26 100 48">
    <path d="M98.5,47.5C96.5,45.5,81,35,62,35c-2.1,0-4.2,0.1-6.2,0.3L39,26c0,4.5,1.3,9,2.4,12.1C31.7,40.7,23.3,44,16,44L0,34
c0,8,4,16,4,16s-4,8-4,16l16-10c7.3,0,15.7,3.3,25.4,5.9C40.3,65,39,69.5,39,74l16.8-9.3c2,0.2,4.1,0.3,6.2,0.3
c19,0,34.5-10.5,36.5-12.5S100.5,49.5,98.5,47.5z M85.5,50c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5
C88,48.9,86.9,50,85.5,50z" />
</symbol>

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

passing a PHP variable into an HTML input field

Recently, I've encountered a problem where I need to transfer PHP variables to HTML input fields. echo $ManuellTagnavnMain; for ($n = 0; $n < 6; $n++) { print_r(++$ManuellTagnavnMain.PHP_EOL); } I'm looking for a way to pass these values ...

javascriptphphtml

Looking for subsequence in dropdown choices with no assigned values

I need assistance with searching for a specific substring within text that is fetched from options generated by MySQL. How can I retrieve the selected option's text value in order to search for my desired substring? $(document).ready(function() { ...

javascriptphphtml

Error loading custom Javascript in MVC 4 view during the first page load

I'm working on an MVC 4 application that utilizes jQuery Mobile. I have my own .JS file where all the functionality is stored. However, when I navigate to a specific view and check the page source, I notice that all scripts files are loaded except fo ...

javascriptjqueryhtmlasp.net-mvcjquery-mobile

The loading cursor in IE7 flickers incessantly, causing the webpage to lag and become un

When I move my cursor and click in text fields, the page becomes unresponsive and shows a wait cursor. If you're curious to see this issue in action, check out this video. This problem is specific to IE7. I've attempted to identify any ajax re ...

javascriptcssinternet-explorer-7

Changing ch to Px in CSS

Important Notes: I have exhaustively explored all the questions and answers related to this particular topic. The question I have is very straightforward: How many pixels are equivalent to 1 character? Here's a sample of my code - code Related Sear ...

javascripthtmlcss

What impact does setting everything to position:relative have on a webpage?

I stumbled upon some CSS / HTML examples and came across this interesting snippet: *, *:before, *:after { position: relative; } It appears that implementing this rule can have a notable impact on the layout. What might be the rationale behind this ...

htmlcsslayoutcss-position

Iterating over an array and displaying elements on the webpage

Struggling to access an array and loop through it, but only able to print out one element instead of all. Need a hint on how to solve this issue. See my code below: let toppingsCount; const burger = document.createElement('div'); const toppingsD ...

javascripthtmlcssdomcss-selectors

Apply the `text-overflow: ellipsis` property to truncate the text of two items within a flex column, which is contained within

I am attempting to accomplish the following: Successfully implementing ellipsis for a single item is achieved with: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; However, my challenge lies in truncating two items. One should appear be ...

css

Invoke a function within an HTML element inserted using the html() method

Looking for help with a JavaScript function: function toggle_concessions(concessions) { var text = "<table>"+ "<tr><td class='concession-name'>gfhgfbfghfd</td><td class='op-encours&a ...

javascripthtmlfunctionappend

Using a loop to format the <ol> tag

After creating an HTML script using angular, I was able to successfully display the names in an array as shown below. <div ng-repeat="namep in names"> <li>Name : <span ng-bind="namep.name"></span></li> <li>Age : ...

htmlangularjs

Transforming the initial character of a label element into uppercase

When I receive an external HTML page, all the data comes in lowercase. I attempted to capitalize the first letter of each label tag using CSS, but it ended up making the entire text uppercase instead. Here is what I tried: .fontmodal { text-transform ...

javascriptjqueryhtmlcss

The NextRouter failed to mount

Currently, I am in the process of incorporating a search functionality into my property rental application. I have successfully added the Nextjs Router to handle the routing. However, when attempting to access localhost:3000/search, an error is encountered ...

htmlreactjsnext.jsfrontendurl-routing

The iPhone display scaling issue is causing difficulty viewing the entire website

Currently experiencing difficulties with a page that lacks sufficient content, resulting in a smaller height. As a result, the iPhone is scaling the page and cutting off the full menu bar (960px wide). I attempted to set a minimum height using a media quer ...

iphonehtmlcssmedia-queries

Basic Hover Effect in Javascript

Looking at this snippet of HTML: <div id="site-header-inner"> <div id="header-logo"> <?php echo wp_get_attachment_image(get_field('header_logo','options'),'full'); ?> </div> <div id= ...

javascriptjqueryhtmlhoverjquery-hover

Tips for updating multiple divs after submitting content with jQuery

My screen contains various widgets, each enclosed with different divs. Currently, I have a form that updates using AJAX when posted through jQuery. However, I am looking to refresh two additional divs located outside the form upon a single jQuery AJAX pos ...

jqueryasp.net-mvcposthtml

Tips for showing the chosen value of a ModelChoiceField in Django

Is there a way to display only the selected value from a forms.ModelChoiceField on a view page? I'm struggling to find a clear solution as a Python newbie, despite searching through various forums. Here is the form code snippet: class Manufacturer1F ...

pythonhtmldjango

What is the best way to stack div elements one after the other?

I am a complete beginner in HTML and I have a project for my web design class about a movie. http://jsfiddle.net/Lbo1ftu9/ <div id="footer"> <a href="D:/MOVIE REPORT/akira.htm" title="GO BACK?"><img src="D:/IMAGES/goback.gif"> My code ...

htmlcss

I cannot understand why I keep receiving <input type="email" value="required"> when all I want is <input type="email" value="" required>

Currently, I am working with PHP code and here is my complete PHP code: echo "<input type=\"email\" class=\"profil_input_text form-control\" name=\"user_email\" pattern=\"^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(& ...

phphtmlinputrequired

The method I used to position a triangle at the bottom border of a parent element with relative

https://i.stack.imgur.com/RZjJ9.png I am trying to achieve a centered triangle within a border, but I am facing a challenge due to the parent component being relative. When I remove the relative positioning, I struggle to position the triangle in the cent ...

htmlcssreactjsstyled-components

What is the proper way to apply a background color to the entire body using CSS?

I'm facing an issue with getting the background color to cover the entire body of my webpage. Currently, it only captures a certain size and when there is scrolling on the window, two shades of colors appear. I want the background color to span the en ...

htmlcssangular