I'm having trouble locating my Adobe Illustrator SVG image, it seems to have disappeared and is no longer displaying

I'm completely baffled by what just happened. I created an amazing svg image in illustrator, saved it, uploaded it to my wordpress site, and everything seemed perfect.

((It's meant to display under the text box on this page.

But then, I resized the screen, and suddenly the image vanished into thin air. No matter how hard I try, it refuses to show up again.

To make matters worse, this issue seems to plague only users of Chrome. Despite creating several other svg images, none of them will appear on Chrome while they work perfectly fine on other browsers.

I even attempted adding code to my htaccess file, but that didn't do the trick. This is strange because I've previously posted svg files on my WordPress site without any hitches...

Just for reference, here are my Illustrator settings:

  • SVG Profiles: SVG 1.1
  • Fonts Type: Convert to Outline
  • Image Location: Embed
  • Advanced Options - CSS Properties: Presentation Attributes
  • Decimal Places: 5, Unicode 8 -Responsive Box Checked

/////// If you need the SVG code, here's a link to Google Docs:

SVG CODE - Google Docs

EDIT** Strangely enough, now the images have disappeared across all browsers without me making any changes.

htmlcssgoogle-chromesvg

Answer №1

If you inspect the <img> element in your browser's developer tools, you will notice the issue. The browser is rendering the <img> for the SVG at (0 x 0) dimensions.

Below is the relevant HTML snippet from your webpage:

<img src="https://makerstrunk.com/wp-content/uploads/2015/04/coursetrunksample1.svg"
     class="mpc-transition attachment-full" alt="coursetrunksample1">

You have not specified a width and height for this image, unlike the PNG versions on the page. Typically, in HTML, images default to their natural/intrinsic size for bitmap images. However, SVGs may not always have these values. In your case, the SVG file lacks width and height attributes. Make sure to check the contents of the SVG file to confirm this.

If you include width and height attributes in your <img> tag, the issue should be resolved.

<img src="https://makerstrunk.com/wp-content/uploads/2015/04/coursetrunksample1.svg"
     class="mpc-transition attachment-full" alt="coursetrunksample1" 
     width="300" height="250">

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 best method for inserting space between two divs?

I need to create more space between the last two cards and the image at the bottom, but this spacing should increase as I resize the browser window. Can anyone help me with this? https://i.stack.imgur.com/rq9t2.png https://i.stack.imgur.com/tOikx.png Th ...

htmlcssimageresponsive-design

What is the best way to apply a className to a component using styled-components in React?

NavigationStyles.js import styled from 'styled-components'; export const Navigation = styled.navwidth: 100%; ; export const MobileNavMenu = styled.ul` height: 80px; .navbar_list_class { font-size: 2rem; background-co ...

javascriptcssreactjsstyled-components

Display a dynamic animation once the user switches to the tab

When a user opens the page in a new tab in the background, CSS animations are triggered before they switch to the tab. Is there a method to display the CSS animation only after the user selects the tab? ...

javascriptcsshtmlcss-animations

Using CSS/HTML5 with either the :target or :active selector can allow for the display of different text content when a

Is it possible to change the text displayed on a website without reloading the page when a link is clicked? For instance, if I have an "About" or "Contact" link on my personal website, can the text in the body of the page be switched dynamically? In the i ...

htmlcsstarget

Customize URL based on selected button

My question may be a bit unclear, but I want to generate dynamic URLs that redirect users to specific pages based on the link clicked. For example: Parent page with links (a, b, c, x, y) User clicks on 'b' User is taken to a Node Page that play ...

javascriptjqueryhtmlcss

What causes the backdrop-filter: blur to malfunction when other elements are animated on the page?

I'm currently in the process of designing a website, and have implemented the backdrop-filter: blur(12px) CSS effect on my navbar. Unfortunately, I encountered an issue when trying to animate text elements using CSS animations, as the blur filter woul ...

htmlcss

Switching display with a toggle mechanism

I've been experimenting with a home automation dashboard and I'm in need of some guidance. How can I make the image change when the button is toggled ON and OFF? I have a sun svg for ON and a moon svg for OFF. <!DOCTYPE html> <html lang= ...

javascripthtmlcss

"Title, background hue 3, and color lined up in a single

.title { background-color: #FFC20E; font-size: 23px; font-weight: 600; padding: 5px 0px 5px 22px; font-family: "Open Sans"; } <h3 class="title">Title</h3> I need to create a title with a unique background color, can you ple ...

htmlcssbackground

Tips on resizing images in card groups with bootstrap 4?

Hey there! I've come across an issue with my code that was initially working perfectly. The images I'm using have different resolutions, causing the card images to display in various sizes. Is there a way to implement image scaling to ensure all ...

htmlcssbootstrap-4

What is the best way to display a new row within a row in Bootstrap 4?

Struggling to design a header image with text positioned at the bottom? Despite creating rows and columns, the text keeps moving to a new line. I need to have two instances of text in the header image, but adjusting absolute position has not helped. I&apos ...

htmlcsstwitter-bootstrapbootstrap-4

Seeking an efficient localStorage method for easy table modification (HTML page provided)

Currently, I am in the process of developing a custom 'tool' that consists of a main page with a menu and several subpages containing tables. This tool is intended for composing responses using prewritten components with my fellow colleagues at w ...

javascripthtmllocal-storagejavascript-objectsgetelementbyid

Issue: Keeping the mat-form-field element in a single line

I am facing an issue with incorporating multiple filters for each column in an angular material table. I cannot figure out why the filter input is not moving to a new line under the header. Here is an image for reference -> Angular material table with m ...

htmlcssangularangular-material

Verifying the compatibility of a font with MathJax on untried devices

Within the style sheet of my website, I have implemented the following code: .mi, .mo { font-family: 'Charter', 'MathJax_Math' !important; } Instead of focusing on whether this will always produce satisfactory results for users if ...

cssfontswebfontsmathjax

What is the process for incorporating a personalized SVG file into the material-ui Icon Component?

For my project, I have a requirement to use custom svg files. To achieve this, I am utilizing <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0865697c6d7a616964257d61483b2631263b">[email protected]</a>. I reviewed ...

cssreactjssvgiconsmaterial-ui

Combining Tailwind with Color Schemes for Stylish Text and Text Shadow Effects

tl;dr I have a utility class in my tailwind.config.ts for customizing text shadows' dimensions and colors. However, when using Tailwind Merge, I face conflicts between text-shadow-{size/color} and text-{color}. The Issue In CSS, text shadows are oft ...

javascriptcssreactjsnext.jstailwind-css

Creating an interactive webpage with Javascript and HTML

I'm facing a challenge with my component setup, which is structured as follows: import { Component, VERSION } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ ...

javascripthtmlangular

Utilizing numbered lists through HTML, CSS, and/or JavaScript

I am looking to accomplish something similar to this... My guess is that the images should be stored in an array in Javascript with the image links. However, I am uncertain if this can be done using only HTML and CSS. I found a solution on this thread, w ...

javascripthtmlcsshtml-lists

Verifying the status of a checkbox label in Java using Selenium

I am currently working on an automation project using Selenium and I'm struggling to figure out how to check the status of a checkbox input. Has anyone else encountered this issue before? Here is a sample code snippet in JavaScript with jQuery: $("i ...

javacsshtmlseleniuminput

Modify the text inside the <span> tag using the :hover and :hover:after pseudo-classes

This code is working properly: HTML: <span class="counter" >test</span> CSS: .counter:hover:after{ content: "hello"; } Result: testhello However, I am trying to replace 'test' with 'hello'. I attempted the foll ...

htmlcsshover

Controlling Play and Pause in an HTML5 Video/Audio Player Using AngularJS

I am looking for a way to manage the HTML5 audio/video player using AngularJS. Specifically, I want to be able to play and pause the player with AngularJS instead of relying on jQuery. Can anyone help me achieve this functionality? ...

javascriptjqueryangularjshtml