Ce site disposera de fonctionnalités limitées pendant que nous effectuons des opérations de maintenance en vue de vous proposer un meilleur service. Si un article ne règle pas votre problème et que vous souhaitez poser une question, notre communauté d’assistance est prête à vous répondre via @FirefoxSupport sur Twitter, et /r/firefox sur Reddit.

Avatar for Username

Rechercher dans l’assistance

Évitez les escroqueries à l’assistance. Nous ne vous demanderons jamais d’appeler ou d’envoyer un SMS à un numéro de téléphone ou de partager des informations personnelles. Veuillez signaler toute activité suspecte en utilisant l’option « Signaler un abus ».

En savoir plus

Ce sujet de discussion a été archivé. Veuillez poser une nouvelle question si vous avez besoin d’aide.

Rendering of images with preserveAspectRatio attribute

  • 1 réponse
  • 2 ont ce problème
  • 15 vues
  • Dernière réponse par cor-el

asturur
asturur
more options

It looks like that rendering of svg with images tags and preserveAspectRaio attribute behaves very different if the image is a png or svg.

I created a svg starting from the example here: http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute

i did this SVG: 

<?xml version="1.0" encoding="UTF-8"?>
  <svg width="450px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  <desc>Example PreserveAspectRatio - illustrates preserveAspectRatio attribute</desc>
  <rect x="1" y="1" width="448" height="298"
        fill="none" stroke="blue"/>
  <g font-size="9">
    <text x="10" y="30">SVG to fit</text>
    <g transform="translate(20,40)"><image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" width="30" height="40" ></image></g>
    <text x="10" y="110">Viewport 1</text>
    <g transform="translate(10,120)"><rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/></g>
    <text x="10" y="180">Viewport 2</text>
    <g transform="translate(20,190)"><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/></g>

    <g id="meet-group-1" transform="translate(100, 60)">
      <text x="0" y="-30">--------------- meet ---------------</text>
      <g><text y="-10">xMin*</text><rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>
        <image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" preserveAspectRatio="xMinYMin meet" width="50" height="30"></image></g>
      <g transform="translate(70,0)"><text y="-10">xMid*</text><rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>
        <image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" preserveAspectRatio="xMidYMid meet" 
             width="50" height="30"></image></g>
      <g transform="translate(0,70)"><text y="-10">xMax*</text><rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>
        <image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" preserveAspectRatio="xMaxYMax meet" 
             width="50" height="30"></image></g>
    </g>

    <g id="meet-group-2" transform="translate(250, 60)">
      <text x="0" y="-30">---------- meet ----------</text>
      <g><text y="-10">*YMin</text><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/>
        <image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" preserveAspectRatio="xMinYMin meet" 
             width="30" height="60"></image></g>
      <g transform="translate(50, 0)"><text y="-10">*YMid</text><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/>
        <image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" preserveAspectRatio="xMidYMid meet" 
             width="30" height="60"></image></g>
      <g transform="translate(100, 0)"><text y="-10">*YMax</text><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/>
        <image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" preserveAspectRatio="xMaxYMax meet" 
             width="30" height="60"></image></g>
    </g>

    <g id="slice-group-1" transform="translate(100, 220)">
      <text x="0" y="-30">---------- slice ----------</text>
      <g><text y="-10">xMin*</text><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/>
        <image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" preserveAspectRatio="xMinYMin slice" 
             width="30" height="60"></image></g>
      <g transform="translate(50,0)"><text y="-10">xMid*</text><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/>
        <image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" preserveAspectRatio="xMidYMid slice" 
             width="30" height="60"></image></g>
      <g transform="translate(100,0)"><text y="-10">xMax*</text><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/>
        <image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" preserveAspectRatio="xMaxYMax slice" 
             width="30" height="60"></image></g>
    </g>

    <g id="slice-group-2" transform="translate(250, 220)">
      <text x="0" y="-30">--------------- slice ---------------</text>
      <g><text y="-10">*YMin</text><rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>
        <image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" preserveAspectRatio="xMinYMin slice" 
             width="50" height="30"></image></g>
      <g transform="translate(70,0)"><text y="-10">*YMid</text><rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>
        <image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" preserveAspectRatio="xMidYMid slice" 
             width="50" height="30"></image></g>
      <g transform="translate(140,0)"><text y="-10">*YMax</text><rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/>
        <image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" preserveAspectRatio="xMaxYMax slice" 
             width="50" height="30"></image></g>
    </g>   
  </g>
</svg>

It renders bad, images are small and do not respect the preserverAspectRatio attribute.

If i swap in the attribute xlink:href the final .svg with a .png ( other version of same image ) everything works as expected , as the reference image in the link i posted. Every browser render same way, inkscape render it better, respecting the attribute.

Someone knows why?

It looks like that rendering of svg with images tags and preserveAspectRaio attribute behaves very different if the image is a png or svg. I created a svg starting from the example here: http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute i did this SVG: ----------------------------------- <pre><nowiki><?xml version="1.0" encoding="UTF-8"?> <svg width="450px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <desc>Example PreserveAspectRatio - illustrates preserveAspectRatio attribute</desc> <rect x="1" y="1" width="448" height="298" fill="none" stroke="blue"/> <g font-size="9"> <text x="10" y="30">SVG to fit</text> <g transform="translate(20,40)"><image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" width="30" height="40" ></image></g> <text x="10" y="110">Viewport 1</text> <g transform="translate(10,120)"><rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/></g> <text x="10" y="180">Viewport 2</text> <g transform="translate(20,190)"><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/></g> <g id="meet-group-1" transform="translate(100, 60)"> <text x="0" y="-30">--------------- meet ---------------</text> <g><text y="-10">xMin*</text><rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/> <image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" preserveAspectRatio="xMinYMin meet" width="50" height="30"></image></g> <g transform="translate(70,0)"><text y="-10">xMid*</text><rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/> <image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" preserveAspectRatio="xMidYMid meet" width="50" height="30"></image></g> <g transform="translate(0,70)"><text y="-10">xMax*</text><rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/> <image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" preserveAspectRatio="xMaxYMax meet" width="50" height="30"></image></g> </g> <g id="meet-group-2" transform="translate(250, 60)"> <text x="0" y="-30">---------- meet ----------</text> <g><text y="-10">*YMin</text><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/> <image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" preserveAspectRatio="xMinYMin meet" width="30" height="60"></image></g> <g transform="translate(50, 0)"><text y="-10">*YMid</text><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/> <image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" preserveAspectRatio="xMidYMid meet" width="30" height="60"></image></g> <g transform="translate(100, 0)"><text y="-10">*YMax</text><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/> <image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" preserveAspectRatio="xMaxYMax meet" width="30" height="60"></image></g> </g> <g id="slice-group-1" transform="translate(100, 220)"> <text x="0" y="-30">---------- slice ----------</text> <g><text y="-10">xMin*</text><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/> <image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" preserveAspectRatio="xMinYMin slice" width="30" height="60"></image></g> <g transform="translate(50,0)"><text y="-10">xMid*</text><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/> <image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" preserveAspectRatio="xMidYMid slice" width="30" height="60"></image></g> <g transform="translate(100,0)"><text y="-10">xMax*</text><rect x='.5' y='.5' width='29' height='59' fill='none' stroke='blue'/> <image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" preserveAspectRatio="xMaxYMax slice" width="30" height="60"></image></g> </g> <g id="slice-group-2" transform="translate(250, 220)"> <text x="0" y="-30">--------------- slice ---------------</text> <g><text y="-10">*YMin</text><rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/> <image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" preserveAspectRatio="xMinYMin slice" width="50" height="30"></image></g> <g transform="translate(70,0)"><text y="-10">*YMid</text><rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/> <image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" preserveAspectRatio="xMidYMid slice" width="50" height="30"></image></g> <g transform="translate(140,0)"><text y="-10">*YMax</text><rect x='.5' y='.5' width='49' height='29' fill='none' stroke='blue'/> <image xlink:href="http://www.deltalink.it/andreab/fabric/assets/smile.svg" preserveAspectRatio="xMaxYMax slice" width="50" height="30"></image></g> </g> </g> </svg></nowiki></pre> ------------------------- It renders bad, images are small and do not respect the preserverAspectRatio attribute. If i swap in the attribute xlink:href the final .svg with a .png ( other version of same image ) everything works as expected , as the reference image in the link i posted. Every browser render same way, inkscape render it better, respecting the attribute. Someone knows why?

Modifié le par cor-el

Toutes les réponses (1)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

The only difference I see between Firefox and Google Chrome is that the images are centered in their view boxes in GC and left aligned in Firefox.

You may have zoomed the page(s) by accident. Reset the page zoom on pages that cause problems.

  • View > Zoom > Reset (Ctrl/Command+0 (zero))

Can you attach a screenshot?

  • Use a compressed image type like PNG or JPG to save the screenshot
  • Make sure that you do not exceed the maximum size of 1 MB

A good place to ask advice about web development is at the mozillaZine "Web Development/Standards Evangelism" forum.

The helpers at that forum are more knowledgeable about web development issues. You need to register at the mozillaZine forum site in order to post at that forum.