相关疑难解决方法(0)

ImageMagick png to svg Image Size

我已使用以下命令成功将PNG转换为SVG:

convert Slide3.png Slide3_converted.svg
Run Code Online (Sandbox Code Playgroud)

问题是生成的文件高达380MB!

我试过这个版本的命令:

convert -size 2000x1200 Slide3.png Slide3_converted_smaller.svg
Run Code Online (Sandbox Code Playgroud)

但没有骰子.大小相同.

imagemagick image-processing

17
推荐指数
1
解决办法
2万
查看次数

数据URI和缓存

我在维基百科上看到这个:

数据URI不是单独缓存其包含的文档(例如CSS或HTML文件),因此每次重载时都会下载包含文档的数据.

这是否意味着每次刷新页面或用户点击导航链接时都会下载我的代码?我该怎么做才能缓存数据-uri?

ps - 我只是在谈论20个左右的小png文件(大多数是丝绸图标,但也有2*16KB文件)

css data-uri

14
推荐指数
1
解决办法
5380
查看次数

如何在html5中显示SVG圈内的图像?

有没有办法在SVG Circle内显示图像?

我尝试在Svg元素中添加图像,但图像不会出现在圆圈中.

<svg width="100" height="100">
<circle cx="50" cy="50" r="40"stroke="green" stroke-width="4" fill="yellow" />
<img src="starkeen_ane.jpg"/>
 </svg>
Run Code Online (Sandbox Code Playgroud)

你能帮助我吗?

html svg image

11
推荐指数
1
解决办法
3万
查看次数

嵌入链接的SVG图像

我有一个SVG文件,它引用了许多其他较小的SVG作为子图像.实际上,主SVG是定位所有其他SVG的模板.

我想创建一个我可以传递给人们的单个图像 - 即数据引用或仅内联包含 - 但运行inkscape Embed Images扩展会导致错误"图像不是PNG,JPEG等类型".

所以听起来像inkscape(v0.48.5)扩展只能实习位图图像,而不是SVG.游民.

我的图像是从主SVG这样引用的

<image id="PGDOWN_R1" x="1436.5"  y="280"  xlink:href="./symbols/PGDOWN_R3.svg"/>
Run Code Online (Sandbox Code Playgroud)

那么如何自动实习/嵌入我所有外部引用的SVG?(也欢迎非inkscape CLI选项)

svg inkscape

8
推荐指数
2
解决办法
3599
查看次数

HTML 中包含的带有“img”标签的 SVG 是否可以链接到带有“image”标签的外部图像?

我在服务器上的同一位置有以下文件 image.svg 和文件 bitmap.png:

<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100px" height="100px" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <image x="0" y="0" width="100px" height="100px"
         xlink:href="bitmap.png" />
</svg>
Run Code Online (Sandbox Code Playgroud)

当我直接转到图像文件时,它包含 bitmap.png 图像。

当我将图像包含在带有<object data="image.svg"></object>标签的网页中时,将加载 bitmap.png 文件。

当我将图像包含在带有<img src="image.svg" />标签的网页中时,bitmap.png 不会加载

是什么赋予了?

html svg image xlink

6
推荐指数
1
解决办法
3169
查看次数

将 png 图像嵌入到 SVG 中

可能的重复:
SVG 是否支持位图图像的嵌入?

我正在尝试将 PNG 图像插入到 SVG 文件中。如果我使用 <image> 标签,我只能设置对 PNG 图像的引用。我不想将整个 PNG 数据放入 SVG,因为如果 PNG 文件将被移动或删除,我的 SVG 文件仍应使用这些 PNG 数据呈现。

SVG格式可以吗?

先感谢您!

svg image

5
推荐指数
1
解决办法
1万
查看次数

如何在同一页面中重用嵌入的 SVG 元素?

我有一个带有嵌入式 SVG 图标元素的简单 HTML5 页面。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
  </head>
  <body>
    <h1>
      <span>ABC</span>
      <svg id="move-icon"
           width="0.7em" height="0.7em"
           viewBox="0 0 10 10"
           style="display: inline-block">
        <defs>
          <marker id="arrow-end-marker"
                  viewBox="0 0 10 10" refX="0" refY="5"
                  markerHeight="3"
                  orient="auto">
            <polygon points="0 0 10 5 0 10" />
	  </marker>
        </defs>
        <line x1="5" y1="5" x2="5" y2="7"
              stroke="black" stroke-width="0.03em"
              marker-end="url(#arrow-end-marker)" />
        <line x1="5" y1="5" x2="3" y2="5"
              stroke="black" stroke-width="0.03em"
              marker-end="url(#arrow-end-marker)" />
        <line x1="5" y1="5" x2="5" y2="3"
              stroke="black" stroke-width="0.03em"
              marker-end="url(#arrow-end-marker)" />
        <line x1="5" y1="5" …
Run Code Online (Sandbox Code Playgroud)

html svg

5
推荐指数
1
解决办法
3864
查看次数

如何用线性渐变绘制完美的对角线

我正在尝试绘制一个像样的对角线,linear-gradient但是当容器很小时我不知道该怎么做>我试图获得一个适合 10x10px 容器的对角线,看起来像这样:

在此处输入图片说明

这是我最好的尝试。

div {
  background: linear-gradient(50deg, transparent 4px, red 4px, red 5px, transparent 5px) no-repeat 0px 25px / 10px 10px;
  display:block;
  width:100px;
  height:100px;
}
Run Code Online (Sandbox Code Playgroud)
<div></div>
Run Code Online (Sandbox Code Playgroud)

我做错了什么?

css linear-gradients diagonal

5
推荐指数
1
解决办法
4778
查看次数

JS:如何将image.png编码为base64代码进行数据URI嵌入?

我有几个不同维度的.png位图,例如./img/dog.png./img/cat.png.如何base64通过JS 加载我的图像的字符串?我的预期数据是那样的(但更长):

 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAAfQCAYAAACaOMR5AAAgAElEQ…ECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAicCwy83crEe3e04AAAAABJRU5ErkJggg==
Run Code Online (Sandbox Code Playgroud)

注意:我希望找回这个字符串,这是我的文件,只是我的文件,没有剪裁,也没有更大.然后我将它嵌入到SVG <image>元素中:

<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AYAAACaOMR5AAAgAElyuiRTYUdG
EQVR4XuydB5RdZfW3nZlk0gukk4QUQiCQEEil994RFBCkigpir4j+7V2xgygiIIgggoBUQTqkQIAACQktCamk90m
yfc8492u1/PdqSlMwslaWTNz7zlv2W/d+7f3b5e8r4H/fvzjH+/3pS996akGvva+b37zm4d27Nhx5Wc+85mxNb3r
7xhtvdFi3bl1VWVnZ2ptuumldVVXVIS+88MLAo4466tlPfOIT459//vmOe+2115L61E07D1i2bFmL7373uw/V5/n
GPEOfSs8666zmq1atasa/dbvvvvva73znOwffeOONp5SXl1e89NJLX37xxRfb3HHHHatbtmy5//XXX3/yRz7ykds
+//nPP92Y+nzntddea8+PNchi/Qc/+MHKb33rW4d84xvfeMR62rdvXzl+/Ph1yKjZzjvvvMZnly5duvquu+46sHX
r1mtow7pDDjnk5aFDh64s1F/Czw3+/tvf/nakMq5Pu1555ZW29HXFF7/4xWNffvnl/s2bN6/s1q3bwj/84Q+3xhh
6EMfOmf58uVtqb/9+vXrmz399NPftey33367Ve/evVc7Hxjnqu23336l9X7qU5866Ve/+tWdH/7whz80e/bs7vvo
t9+LyLXlxz72sYfWrl274Z133qlq165dyT//+c8D7r333gN22GGHOdQ1as6cOfvy/Y4DBgy4AXncMWPGDGHsdfgW
...
...
...
vf/nakMq5Pu1555ZW29HXFF7/4xdfgvf/nakMq5Pu1sfgW29HXFF7/4xW">
</image>
Run Code Online (Sandbox Code Playgroud)

我的最终项目看起来会像那样:)

在此输入图像描述

另请参阅:https://rugger-demast.codio.io/front/_location_map-en-wikiatlas.html,您可以在其中下载SVG,但png目前只是一个链接,不会下载.

javascript base64 uri image jqxhr

3
推荐指数
1
解决办法
8516
查看次数

是否以 JSON 格式存储 SVG 图像?

我不知道我是否在正确的“堆栈”中询问,但目前我似乎是最合适的。还请注意,如果我错了,我会立即将问题转移到另一个堆栈。

我需要保存矢量图像(很可能是 SVG 格式)。我们正在考虑如何记住这个图像。关键是我们更喜欢只使用 JSON 文件,这意味着你必须将 SVG 图像至少转换为 Base54,但它是否无损?

另一种方法是将此 SVG 图像的本地路径保存在 JSON 文件的字段中。该图像和 JSON 文件不应通过网络发送,并且考虑到 PC 环境,从 Bas64 到 SVG 的转换不应太慢。根据您的经验,您建议做什么?

base64 svg json jq

1
推荐指数
1
解决办法
2万
查看次数