Cannot see SVG over header

Asked
Active3 hr before
Viewed126 times

8 Answers

headercannot
90%

Seems pretty simple but trust me to find this difficult, I have a simple header with a background colour and all I want is to put an svg into it.,Ive also tried inline styling but cant get it to appear, when I try to inspect the element it highlights it as if its under the header,Connect and share knowledge within a single location that is structured and easy to search., Did the last US plane to leave Afghanistan have support from the control tower?

Component

import React from "react";
import "./Header.css";

const Header = () => {
  return (
    <>
      <header>
        <div className="socials_row">
          <div>
            <svg
              version="1.1"
              id="Capa_1"
              xmlns="http://www.w3.org/2000/svg"
              x="0px"
              y="0px"
              viewBox="0 0 167.657 167.657"
              className="social_image"
            >
              <g>
                <path
                  fill="white"  d="M83.829,0.349C37.532,0.349,0,37.881,0,84.178c0,41.523,30.222,75.911,69.848,82.57v-65.081H49.626
        v-23.42h20.222V60.978c0-20.037,12.238-30.956,30.115-30.956c8.562,0,15.92,0.638,18.056,0.919v20.944l-12.399,0.006
        c-9.72,0-11.594,4.618-11.594,11.397v14.947h23.193l-3.025,23.42H94.026v65.653c41.476-5.048,73.631-40.312,73.631-83.154
        C167.657,37.881,130.125,0.349,83.829,0.349z"
                />
              </g>
              <g></g>
              <g></g>
              <g></g>
              <g></g>
              <g></g>
              <g></g>
              <g></g>
              <g></g>
              <g></g>
              <g></g>
              <g></g>
              <g></g>
              <g></g>
              <g></g>
              <g></g>
            </svg>
          </div>
        </div>
        <div className="main_header"></div>
      </header>
    </>
  );
};

export default Header;

load more v
88%

I just came across this problem where when designing and having live preview in chrome I didn’t see svgs when used as img.,Thank you very much! SVG image was not showing on Website hosted on 1und1 Webserver. Entering “AddType…” into .htaccess solved the problem!, Andrea Permalink to comment# November 15, 2015 Thank you very much! SVG image was not showing on Website hosted on 1und1 Webserver. Entering “AddType…” into .htaccess solved the problem! Reply , Mac Permalink to comment# August 20, 2016 I just came across this problem where when designing and having live preview in chrome I didn’t see svgs when used as img. Solution was dead easy – adblock plus switched off on /localhost solved it all. Hope that helps Reply

Add this to your .htaccess file at the root to fix it:

AddType image / svg + xml.svg.svgz
load more v
72%

Seems pretty simple but trust me to find this difficult, I have a simple header with a background colour and all I want is to put an svg into it.,Ive also tried inline styling but cant get it to appear, when I try to inspect the element it highlights it as if its under the header,Previous story Unable to change gif at runtime in PyQt5,Next story Trying to get SearchVector to search multiple words in multiple fields

import React from "react";
import "./Header.css";

const Header = () => {
  return (
    <>
      <header>
        <div className="socials_row">
          <div>
            <svg
              version="1.1"
              id="Capa_1"
              xmlns="http://www.w3.org/2000/svg"
              x="0px"
              y="0px"
              viewBox="0 0 167.657 167.657"
              className="social_image"
            >
              <g>
                <path
                  fill="white"  d="M83.829,0.349C37.532,0.349,0,37.881,0,84.178c0,41.523,30.222,75.911,69.848,82.57v-65.081H49.626
        v-23.42h20.222V60.978c0-20.037,12.238-30.956,30.115-30.956c8.562,0,15.92,0.638,18.056,0.919v20.944l-12.399,0.006
        c-9.72,0-11.594,4.618-11.594,11.397v14.947h23.193l-3.025,23.42H94.026v65.653c41.476-5.048,73.631-40.312,73.631-83.154
        C167.657,37.881,130.125,0.349,83.829,0.349z"
                />
              </g>
              <g></g>
              <g></g>
              <g></g>
              <g></g>
              <g></g>
              <g></g>
              <g></g>
              <g></g>
              <g></g>
              <g></g>
              <g></g>
              <g></g>
              <g></g>
              <g></g>
              <g></g>
            </svg>
          </div>
        </div>
        <div className="main_header"></div>
      </header>
    </>
  );
};

export default Header;

load more v
65%

I uploaded the plugin using firefox, on my laptop I use Chrome and they have all disappeared. I have had a friend check too and she can’t see the header on Edge either., Resolved fandrdesigns (@fandrdesigns) 3 years ago Hi there! I uploaded the plugin using firefox, on my laptop I use Chrome and they have all disappeared. I have had a friend check too and she can’t see the header on Edge either. Have I missed something when setting the plugin up? I am using the DIVI theme. Many thanks Charlotte The page I need help with: [log in to see the link] ,This will have the added benefit of the text being searchable for SEO too. That’s the approach I would take personally.,I will mark this thread as resolved since the issue at hand is not the problem you’re having.

I do however have this in my theme CSS to make sure the SVG images always show up because they can display at 0px sometimes due to the nature of SVGs not actually being images:

.et_pb_image img { width: 100%; }

.et_pb_image img {
   width: 100 % ;
}
75%

Now that you have an idea of how to create basic SVG files, the next stage is to upload them to a Webserver. There are some gotchas at this stage though. For normal SVG files, servers should send the HTTP headers:,before SVG 2, to identify the version of the SVG for other types of validation the version and baseProfile attributes should always be used instead. Both version and baseProfile attributes are deprecated in SVG 2.,You can check that your server is sending the correct HTTP headers with your SVG files by using the Network Monitor panel or a site such as websniffer.cc. Submit the URL of one of your SVG files and look at the HTTP response headers. If you find that your server is not sending the headers with the values given above, then you should contact your Web host. If you have problems convincing them to correctly configure their servers for SVG, there may be ways to do it yourself. See the server configuration page on the w3.org for a range of simple solutions.,Server misconfiguration is a very common reason for SVG failing to load, so make sure you check yours. If your server is not configured to send the correct headers with the SVG files it serves, then Firefox will most likely show the markup of the files as text or encoded garbage, or even ask the viewer to choose an application to open them.

<svg version="1.1" width="300" height="200" xmlns="http://www.w3.org/2000/svg">

   <rect width="100%" height="100%" fill="red" />

   <circle cx="150" cy="100" r="80" fill="green" />

   <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>
load more v
40%

100% and 290px not working. ,Option #1 (directly set the image size): ,Where did you put the change? ,Option #2 (counteract the collapsing effect of float:left):

Option #1 (directly set the image size):

<div id="header-left-section">
   <div id="header-logo-image">
      <a class="custom-logo-link">
         <img class="custom-logo" style="width: 245px">

Option #2 (counteract the collapsing effect of float:left):

<div id="header-left-section">
   <div id="header-logo-image" style="width: 290px">
      <a class="custom-logo-link">
         <img class="custom-logo">
load more v
22%

Let element be the outermost svg element., The x and y attributes specify the top-left corner of the rectangular region into which an embedded ‘svg’ element is placed. On an outermost svg element, these attributes have no effect. ,If the current ‘svg’ element is not the outermost svg element, then return.,If the current ‘svg’ element is not the outermost svg element, then return 1.

<?xml version="1.0" standalone="no"?>
<svg width="5cm" height="4cm" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <desc>Four separate rectangles
   </desc>
   <rect x="0.5cm" y="0.5cm" width="2cm" height="1cm" />
   <rect x="0.5cm" y="2cm" width="1cm" height="1.5cm" />
   <rect x="3cm" y="0.5cm" width="1.5cm" height="2cm" />
   <rect x="3.5cm" y="3cm" width="1cm" height="0.5cm" />

   <!-- Show outline of viewport using 'rect' element -->
   <rect x=".01cm" y=".01cm" width="4.98cm" height="3.98cm" fill="none" stroke="blue" stroke-width=".02cm" />

</svg>
load more v
60%

This also then allowed us to use our theme’s control panel to change the logo in our WordPress header over to our SVG file. You can see below it is indeed serving up the .svg file. And looks beautiful now on retina screens.,Ya we aren’t using SVGs in our article, but we do use them on our site. For example, our logo at the top of the site is an SVG, along with icons on our feature pages, etc… Thanks,After you install the plugin, there are no settings, it will simply sanitize your SVGs upon upload. On our test site below you can see we replaced our logo with an SVG file, it is view-able like normal in the media library.,Correct, it would be safer to use the free plugin mentioned above as the file gets sanitized upon uploading. You can then call it via PHP after it is in your media library.

Many SVG plugins on the repository are utilizing the following code, which simply enables the MIME type to allow uploading of SVGs to the WordPress media library. This is not the safe way to do this! So don’t go and just download the first free SVG plugin you see or copy paste this code and think you’re good to go.

function cc_mime_types($mimes) {
   $mimes['svg'] = 'image/svg+xml';
   return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

Other "header-cannot" queries related to "Cannot see SVG over header"