Jump to content

Svg uploads get stuck at 100%


Recommended Posts

Hi,

When I upload a large(ish) SVG (≈120ko in this case) into an image field, it tends to get stuck at 100% and block the whole website. If I force refresh the admin page, the svg has not been uploaded. The file is correctly copied into the assets folder though. Other svg tends to be uploaded fine albeit I've noticed that pages containing svg images in the admin are very slow to load generally. Other pages using the same template but with jpeg or png images are much faster to load.

I get the following error in the JS console:

148730039_Capturedecran2021-03-08a13_07_19.thumb.png.9a903a5a85b1c9444fa44b0e618768d0.png

I develop locally using MAMP on macOS and I'm using Firefox. I'm using the last ProcessWire version (3.0.165).
I also tested in Chrome and got the same error.

Link to comment
Share on other sites

Hi,

sorry if it sounds like a silly answer 🙂 but, of course, i guess you have allowed svg format for your image field
if so, have you tried using the svg sanitizer module

https://processwire.com/modules/file-validator-svg-sanitizer/

and of course have you checked your svg source code, i use svg a lot and, when using them for a web page, i often have to simplify the xml code, getting rid of a lot of non useful code...

just in case 🙂

have a nice day

Link to comment
Share on other sites

Hi,

Thank you for your answer.

Yes I did allow for svg in the image field. Other svg files uploads fine, only slightly heavier one seems to pose problem.
The svg has been exported with Adobe Illustrator which does indeed produce bloated svg. I used an online compressor on the problematic file (https://vecta.io/nano) and it did upload after that. I'll look into the plugin you linked, thanks !

Also, the general slowness of the admin page seems to be gone when I put the website online, so it may have more to do with my local server settings or something.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By spercy16
      These issues should be fairly easy for any intermediate to advanced ProcessWire developer to answer. I'm new to PHP and relatively new to ProcessWire and just need a bit of help. What I'm trying to do is bring in a couple of cards from my Projects page to display on my home page. I finally got the code right to bring in the cards but right now they're using my original images instead of my resized "variations". So firstly, I would like to know how to reference the variations of my images instead of using the original. Secondly, I need to grab only four of the cards from the Project page and not import in all ten. It should be just two small changes to my code to do these things (I would imagine). Here is the code I currently have for that section:
      <?php // https://processwire.com/api/arrays/ // check if the array of images has items if (count($pages->get("/projects/")->images)) : // get array of images from the field $images = $pages->get("/projects/")->images; $count = 0; // iterate over each one foreach ($images as $image) : $count++; $sectionText = $pages->get("/projects/")->get("paragraph_$count"); $img = $image; $buttonCode = $pages->get("/projects/")->get("url_$count"); ?> <span id="card<?php echo $count?>" class="card"> <img class="cardThumb" src="<?php echo $img->url; ?>" alt="<?php echo $image->description; ?> Thumbnail" /> <div class="cardBody"> <div class="cardText"> <h2><?php echo $img->description; ?></h2> <?php echo $sectionText; ?> </div> <div class="primaryBtn"> <a href="https://www.paypal.com/donate?hosted_button_id= <?php echo $buttonCode; ?> &source=url"> <button> <i class="fas fa-donate"></i> Donate </button> </a> </div> </div> </span> <?php endforeach; endif; ?> Thanks in advance for any help!
    • By Chris Bennett
      2021 update
      These things change and get tweaked over time, as stuff always does.
      We can make the size declaration a little more relevant.
      Declare a selection of sizes for your svg to "encourage" chromium-based browsers to use it instead of the larger bitmapped 192x192 and other assorted icons.
      We also need to thread the needle to ensure app start icons don't get confused and end up with an icon that is smaller than desired.
      Declare it last, after your png fallbacks - last one that is suitable size *must* get the nod. Counter-intuitively, declare that your svg is 150x150.   (adjusted for 2021) 👉 "sizes": "48x48 72x72 96x96 128x128 150x150 256x256 512x512 1024x1024",
      { "name": "Alfresco bar + bistro, Eumundi", "short_name": "Alfresco", "description": "Relaxed outdoor dining on our spacious deck in Eumundi", "start_url": "/", "display": "standalone", "background_color": "#acbd72", "theme_color": "#acbd72", "icons": [ { "src": "https://www.alfresco-bar-bistro.com.au/site/assets/files/favicons/favicon-48x48.png", "sizes": "48x48", "type": "image/png", "purpose": "any" }, { "src": "https://www.alfresco-bar-bistro.com.au/site/assets/files/favicons/favicon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" }, { "src": "https://www.alfresco-bar-bistro.com.au/site/assets/files/favicons/favicon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" }, { "src": "https://www.alfresco-bar-bistro.com.au/site/assets/files/favicons/maskable-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }, { "src": "https://www.alfresco-bar-bistro.com.au/site/assets/files/favicons/favicon.svg", "sizes": "48x48 72x72 96x96 128x128 150x150 256x256 512x512 1024x1024", "type": "image/svg+xml", "purpose": "any" } ] } Cross-Origin-Resource-Policy (CORP) manifest/icon bug
      A slightly-related testing note, if you are incorporating Cross-Origin-Resource-Policy (CORP) to enhance site security.
      Please note there is a chromium bug which affects chromium dev tools ability to properly display your manifest icons:
      Chromium DevTools bug: Cross-Origin-Resource-Policy prevents manifest icons from loading

      This long-term bug doesn't seem to affect the way the manifest itself works or the icons, just their display in Dev tools > Application > Manifest in  Chrome, Edge, Brave, Opera... sheesh.
      Firefox Dev tools continues to happily display them without a problem.
      ------------------------------------------------------------------------------------
      Quick tip for 2020 web manifests, which I couldn't find anywhere else.

      Wanted web manifest on Chrome/Edge to download the tiny favicon svg, instead of the larger 192x192 png it wanted to by default.
      Not a big deal, but mildly annoying: 15kb (non-scalable) png vs 1.5kb (infinitely scalable) svg.
      After a little head-scratching and fiddling around, came up with a solution that seems to do the trick.
      Declare it last, after your png fallbacks - last one that is suitable size *must* get the nod. Counter-intuitively, declare that your svg is 150x150.   (adjusted for 2021) Mine isn't. Never has been, it's a scalable vector graphic.
      Simply declaring it is 150x150 in the manifest is enough to get the job done.

      Suspect the Chrome/Edge engine declares that any non-specified svgs are given that 150x150 size and anything else returns as a "fail".
      Without declaring a size on it, or declaring it as anything other than 150x150, it just wouldn't load. 
      Weird, but works, so I'm happy 😊
       
      { "name": "Longer App/Business Name", "short_name": "Short Name", "description": "Description of App/Business", "start_url": "/", "display": "standalone", "background_color": "#880000", "theme_color": "#880000", "icons": [ { "src": "favicon-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" }, { "src": "favicon-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" }, { "src": "maskable-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }, { "src": "favicon.svg", "sizes": "150x150", "type": "image/svg+xml", "purpose": "any" } ] }  
    • By picarica
      so hello there i have fiel field type i have lots of stuff there, and also an image i can easily get image from that field using
                                                        
      $options = array('quality' => 85, 'upscaling' => true, 'cropping' => 'north', 'sharpening' => 'medium'); $word = ".png"; // Test if string contains the word foreach($childgames->subor_hry as $file) { if(strpos($file, $word) !== false){ /* $imger = $file->size(473, 266, $options); */ echo $file; /* echo $file->url; */ } } so i get the fiel i tried invoking size on it like the commented out part and it doesnt work i get error Oh snizzle… Error:     Exception: Method Pagefile::size does not exist or is not callable in this context (in
      what am i doing wrong? can you guys help me by all logic this should work
    • By Marvin
      Hello, my name Marvin, i want to ask something. I'm new at processwire, and still learn it, i try yo showing an image, at a table, the image was show, but i can't resize the image
      please HELP
      Here i attach, my code belor
      <?php $num = 1; foreach($pages->get("/files/")->children as $child) { $current = $child === $page ? " class='current'" : ''; $result = $child->images; // $result->width(900); // $result->height(100); foreach($result as $items){ foreach($pages->get($child->name)->files as $file) { // $file = $child->files; // echo $file->name; echo "<tr><td>".$num++.".</td><td>".$child->title."</td><td>".$child->text_1."</td><td>".$child->text_2."</td><td>".$child->text_3."</td><td><a href='".$file->httpUrl."'>".$file->name."</a></td><td><img src='".$items->url."'></td></tr>"; } } } ?>  
    • By Bike
      Hello everyone!
      I am new to PW and at this moment there are these issues that I cannot clearly understand:
      1) Image Position
      Previously I used TinyMCE and there I could get an image floating left or right by simply selecting it and pressing the text justify buttons from the menu bar. In CKEditor however it just causes the hole paragraphs content to be aligned which results in code like this and of course the image is not floating that way:
      <p class="xyz" style="text-align:right"><img alt="" src="someimage.jpg" width="1000" /></p> Q: Is it possible to add float to images just by clicking the text align buttons? As far as I figured it out the only way to align images is within the image dialouge which I find is pretty inconvenient.
      2) Image Caption / Figure / Figcaption
      When a title is given to an image it is wrapped inside a figure tag and a figcaption tag is applied. That's fine. But I need the image to be wrapped inside another picture tag for styling reasons (I want to add a shadow png with picture::after). I'd like to end up with this:
      <figure><picture><img alt="" src="someimage.jpg" width="1000" /></picture> <figcaption>Caption there</figcaption> </figure> Q: I think I have to modify the plugins code to achieve it, right? If so does anyone knows the file / location?
      Q: If a figure tag is placed how would I change its position say to another paragraph? Drag & drop just relocates the image leaving the figure tag where it was. How to reposition the whole thing?
      Q: How / where would I enter image description the be shown only in say a lightbox but not alongside the image itself? I thought the textarea provided in the image field could do the job but how to access it from the editor? Even possible?
      Well I hope someone understands and I'd be thankful for a clue of any of these questions.
      ✌️ Bike
       
×
×
  • Create New...