标签: svg

在构建网站或界面等时应该何时使用某些图像文件类型？

他们的优点和缺点是什么？

我知道PNG和GIF是无损的,而JPEG是有损的.
但是PNG和GIF之间的主要区别是什么？
为什么我更喜欢一个呢？什么是SVG以及何时使用它？

如果你不关心每个像素,你应该总是使用JPEG,因为它是"最轻"的吗？

我应该使用<img>,<object>或<embed>加载SVG文件到一个页面类似于加载的方式jpg,gif还是png？

每个代码的代码是什么,以确保它尽可能地工作？(我在我的研究中看到了包括mimetype或指向后备SVG渲染器的参考,并没有看到一个很好的最新参考).

假设我正在检查与Modernizr的 SVG支持,并<img>为不支持SVG的浏览器退回(可能用普通标签替换).

什么是动态创建元素并能够移动它们的最佳方法？例如,假设我想创建一个矩形,圆形和多边形,然后选择这些对象并移动它们.

我知道HTML5提供了三个可以实现这一目标的元素:svg,canvas和div.对于我想要做的事情,哪一个元素将提供最佳性能？

为了比较这些方法,我考虑创建三个视觉上相同的网页,每个网页都有页眉,页脚,小部件和文本内容.第一页中的小部件将完全使用canvas元素创建,第二个完全使用svg元素创建,第三个使用plain div元素HTML和CSS创建.

这是我提出的一个方便的代码的自我问答.

目前,没有一种简单的方法来嵌入SVG图像,然后通过CSS访问SVG元素.有各种使用JS SVG框架的方法,但如果你所做的只是制作一个带有翻转状态的简单图标,它们就会过于复杂.

所以这就是我提出的,我认为这是迄今为止在网站上使用SVG文件的最简单方法.它从早期的文本到图像替换方法中采用了它的概念,但据我所知,SVG从未做过.

这是个问题:

如何在不使用JS-SVG框架的情况下嵌入SVG并在CSS中更改其颜色？

是否可以在SVG填充颜色上设置透明度或alpha级别？

我尝试在fill标签中添加两个值(将其从fill ="#044B94"更改为fill ="#044B9466"),但这不起作用.

Apple的iPad Mini是iPad 2的小型克隆,其方式比我们想要的更多.在JavaScript中,该window.navigator对象为Mini和iPad 2公开了相同的值.到目前为止,我的测试检测差异并未导致成功.

为什么这很重要？

由于iPad Mini和iPad 2屏幕的像素相同但实际尺寸(英寸/厘米)不同,因此它们的PPI(每英寸像素数)不同.

对于提供友好用户界面的web应用和游戏,某些元素相对于用户的拇指或手指位置进行大小调整,因此,我们可能想要缩放某些图像或按钮以提供更好的用户体验.

到目前为止我尝试过的事情(包括一些非常明显的方法):

• window.devicepixelratio
• CSS元素宽度,单位为cm
• CSS媒体查询(例如resolution和-webkit-device-pixel-ratio)
• 类似单位的SVG图纸
• 在设定的时间内进行各种CSS webkit变换并计算渲染帧requestAnimFrame(我希望能够检测到可测量的差异)

我是新鲜的想法.你呢？

更新 感谢目前为止的回复.我想评论人们投票反对检测iPad mini而不是2,因为苹果公司已经呃,这是一个统治它们的指导方针.好的,这就是我的理由,为什么我觉得在这个世界上真的有意义的是知道一个人是在使用iPad mini还是2.并且我的理由是你喜欢的.

iPad mini不仅是一个小得多的设备(9.7英寸对7.9英寸),但它的外形允许不同的用途.除非你是查克诺里斯,否则iPad 2通常在游戏时用双手握住.迷你体积更小,但它也更轻巧,允许您用一只手拿着它并使用另一只手轻扫或点击或诸如此类的游戏.作为一名游戏设计师和开发者,我只想知道它是否是迷你游戏,所以如果我愿意,我可以选择为玩家提供不同的控制方案(例如在与一组玩家进行A/B测试之后).

为什么？嗯,事实证明,大多数用户都倾向于使用默认设置,因此当播放器加载时,请忽略虚拟拇指杆并在屏幕上放置其他基于抽头的控件(这里只是给出一个任意示例)比赛的第一次是我,恐怕其他游戏设计师,很想能够做到.

因此,恕我直言,这超出了粗略的手指/指南讨论,只是Apple和所有其他供应商应该做的事情:允许我们唯一地识别您的设备并思考不同而不是遵循指南.

我有一个SVG文件,其定义大小为16x16.当我使用Image Magick的转换程序将其转换为PNG时,我得到一个16x16像素的PNG,这太小了:

convert test.svg test.png

我需要指定输出PNG的像素大小.-size参数似乎被忽略,-scale参数在转换为PNG 后缩放PNG.到目前为止,我通过使用-density参数得到了最好的结果:

convert -density 1200 test.svg test.png

但是我不满意,因为我想要以像素为单位指定输出大小而不用数学来计算密度值.所以我想做这样的事情:

convert -setTheOutputSizeOfThePng 1024x1024 test.svg test.png

那么我在这里使用的神奇参数是什么？

是否可以使用css3为svg元素设置投影,例如

box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;

我看到了一些关于使用滤镜效果创建阴影的评论.有一个单独使用css的例子.下面是一个工作代码,其中正确应用了cusor样式,但没有阴影效果.请帮我用最少的代码获得阴影效果.

svg .shadow { 
  cursor:crosshair; 
  -moz-box-shadow: -5px -5px 5px #888;
  -webkit-box-shadow: -5px -5px 5px #888;
  box-shadow: -5px -5px 5px #888; 
}	

HTML

<img src="logo.svg" alt="Logo" class="logo-img">

CSS

.logo-img path {
  fill: #000;
}

上面的svg加载并且是原生的,fill: #fff但是当我使用上面css的内容尝试将其更改为黑色时它不会改变,这是我第一次玩SVG而且我不确定它为什么不起作用.

我正在使用jQuery SVG.我无法在对象中添加或删除类.谁知道我的错误？

SVG:

<rect class="jimmy" id="p5" x="200" y="200" width="100" height="100" />

不会添加类的jQuery:

$(".jimmy").click(function() {
    $(this).addClass("clicked");
});

我知道SVG和jQuery正在协同工作,因为我可以定位对象并在单击时触发警报:

$(".jimmy").click(function() {
    alert('Handler for .click() called.');
});